V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ifanr2016
V2EX  ›  推广

知晓云 | 无需后端编码, 10 分钟教你实现一个朋友圈小程序

  •  
  •   ifanr2016 · 2017-10-11 13:54:57 +08:00 · 10224 次点击
    这是一个创建于 2600 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这是一篇简易版朋友圈小程序的快速开发教程。要实现的功能有:

    ▪ 所有人都可以发布内容。

    ▪ 只有发布者可以删除自己发布的内容。

    ▪ 所有人都可以看到其他人发布的内容。

    ▪ 所有人都可以对内容进行评论。

    ▪ 只有发布者可以可以删除评论。

    ▪ 所有人都可以看到其他人发表的评论。

    Alt text

    虽然目标功能的业务逻辑并不复杂,但其背后需要一套靠谱的权限控制系统,也意味着需要一个完整的后端服务系统来支持运行。

    为了免去搭建、维护后端服务器的麻烦,我们选择使用知晓云(cloud.miapp.com)进行开发。

    除了因为可以省去后端服务器的开发外,另一个选择它的原因,是它的数据表 ACL ( Access control list,访问权限控制)可以实现目标功能的权限控制操作。

    我们只需要将获取到的数据正确渲染到页面,即可完成目标小程序的开发,十分方便。

    了解 ACL 控制系统

    工欲善其事,必先利其器。在开始小程序开发之前,我们先来了解一下知晓云的 ACL 控制系统。 进入知晓云控制后,点击「应用」,在「数据库」模块里,点击「创建数据库」,就能看到 ACL 控制面板。

    Alt text

    在创建数据表时,可以设置该数据表的表录入权限,以及该表中数据行的默认权限。若权限勾选了用户组则必须选择拥有权限的用户组。

    需要注意的是,用户组需要在用户模块中提前设置好才能进行选择。

    Alt text

    设置好了默认数据行的权限后,该表的所有数据行都继承该默认权限。若你需要对某些记录进行权限修改,可以选择要修改的数据行,点击编辑,即可进行权限修改。

    Alt text

    若你需要对默认数据行权限进行修改,对数据表点击编辑即可打开权限修改面板。修改的默认数据行权限,仅对修改后新增的数据生效,对已存在的旧数据无效。

    Alt text

    设置好 ACL 权限后,只需要调用 BaaS SDK 的接口即可以方便进行数据库的操作。

    关于数据库的操作,我们之前已发布了详细的教程,这里就不再赘述。

    了解的工具的使用方法之后,我们开始小程序的开发。

    数据表创建

    首先我们为内容发表、评论发表分别创建数据库表。权限设置如下:

    Alt text

    ▪ 所有人都可以发表内容或者对某一条内容发表评论,所以数据表的录入权限我们设置为所有人。 ▪ 所有人都可以看到别人发表的内容,数据行的默认权限读权限设置为所有人。 ▪ 但是只有发布者可以删除发表的内容,数据行的默认写权限设为创建者。 ▪ 记录评论的数据表我们也做一样的设置。

    为了实现目标小程序的功能,内容表 message 的自定义字段有:text (内容)、author (内容发布者)、avatar_url (内容发布者的头像地址);评论 comment 表的自定义字段有:message_id (内容 ID )、author (发布者)、text (评论内容)。

    需要注意:知晓云创建的数据表会默认帮你创建几个字段,其中有一个 created_by 创建者,会自动帮你记录微信接口返回的用户 ID ( userInfo.id )。 我一开始并没有留意到这个细节,在表中自己维护了一个 wx_id 字段,但是没有考虑好数据获取稳定性的问题,在某种情况会传入失败,还耗费了一些时间处理这个问题。最后发现这部分数据知晓云已经帮你处理好了。_

    小程序开发

    在微信开发者工具创建一个新的项目,它会默认自动帮你新建一个小程序 demo。 在 app.js 里已经有完整的获取用户信息的代码,可以直接用,在 onLaunch 中引入 BaaS SDK 即可。

    在 index.wxml 里进行页面布局开发,小程序的框架语法与主流的框架的语法还是基本一致的,除了提供一些基本的组件,没有太多的标签,很容易上手。

    如评论的页面结构:用 block 标签进行条件渲染控制,应用列表渲染进行评论内容的渲染。以 data- 为前缀的自定义数据可以在监听事件中以 e.target.dataset 获取。

    Alt text

    由于在创建数据表时已设置好了 ACL 权限,我们只需要应用 BaaS SDK 进行数据获取、查询、删除等操作即可,不需要对数据进行二次处理。

    如在获取内容列表、评论列表数据的操作中,根据 SDK 的文档进行操作,不需要传入特定的查询条件。获取所有的内容数据、是否可以读出数据行的权限操作,都可以交给知晓云的 ACL 控制。

    若数据行的 ACL 控制改为创建者可读,则除创建者外其他用户拉取到不到该条数据。

    Alt text

    同时需要注意的是,我们是通过获取内容数据,根据内容 ID 再去查询对应的评论数据,该过程是异步的。

    我在这里的做法是,将获取到的内容数据传入到获取评论的方法中,待评论数据获取成功后再一并通过 setData 更新数据渲染。若不是同时更新内容、评论的数据,会造成评论数据渲染失败。

    新增数据、删除数据的操作根据 SDK 的文档写即可,这里不详述。

    至此我们的小程序已开发完毕。效果如下:

    Alt text

    点击发布消息可进行消息发布,可对别人的发布的内容进行评论。本人创建的内容、评论可以进行删除操作。完成这一个小程序,我并不需要进行后端代码的编写,也不需要对获取到的数据进行复杂的判断处理。 当然这只是一个简单例子的应用,你也可以进行更复杂的功能设计。如果你也有类似的业务需求,就赶紧来知晓云(cloud.miapp.com)试一下吧。

    Alt text

    8 条回复    2017-10-13 18:28:22 +08:00
    ibegyourpardon
        1
    ibegyourpardon  
       2017-10-11 16:42:56 +08:00   ❤️ 1
    很多年前网络上了流行着很多版本( ASP 居多)的留言板程序,就是这个样。。。
    wangxiaoer
        2
    wangxiaoer  
       2017-10-11 17:36:15 +08:00 via Android
    这么卖力推广……… 心疼 ifanr 一秒钟。
    Xrong
        3
    Xrong  
       2017-10-12 10:18:11 +08:00
    没用,小程序使用率太低,对厂商来说变现困难,全特么给微信做嫁衣,鬼才给他们开发。
    xeis
        4
    xeis  
       2017-10-12 14:34:12 +08:00 via Android
    好东西,收藏
    xeis
        5
    xeis  
       2017-10-12 19:10:09 +08:00
    cloud.miapp.com 点击登录以后,在跳转到 ifan 之前,为何会先跳到 127.0.0.1 ?
    ifanr2016
        6
    ifanr2016  
    OP
       2017-10-13 13:36:34 +08:00
    @xeis 感谢关注,此问题已修复,如有更多疑问可以扫描文章尾部二维码添加客服,会有专门的同事为您解答。
    won
        7
    won  
       2017-10-13 17:57:51 +08:00
    小程序一个新领域光有技术是没用的,要有很强的运营和市场
    xeis
        8
    xeis  
       2017-10-13 18:28:22 +08:00 via Android
    @ifanr2016 如果再有一套 css 就完美了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1059 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 19:24 · PVG 03:24 · LAX 11:24 · JFK 14:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.