借助云开发实现互动打卡｜实战

我的介绍

你们好，我是Zero，一名大四的前端开发爱好者，目前主要研究微信小程序和iOS开发。

这是第二次参加微信小程序应用开发赛，2018年咱们设计了一款经过二维码寻找丢失物品的小程序《蝴蝶寻物》，得到了华北赛区三等奖。

今年，在小程序云开发功能的大力推广下，我决定采用云开发的方式，实现一个双人互动打卡互动的小程序《Mango Daily》(中文名称《芒果平常》)。(因为是我的开发者帐号，因此暂时还未上架)

得力于云开发提供的API，本项目在较短的时间内就实现了比较理想的效果。

接下来，我想从本项目入手，讲讲我是如何依靠小程序+云开发平台将想法快速实现的。

1. 技术准备

在去年的项目中，咱们采用ThinkPHP开发了一套API系统，其中须要实现小程序的受权登陆，设置鉴权来保证数据安全等操做。整个过程只有我一名开发人员，因此大体就是“先搞定后端，其次搞定界面，最后进行联调”的一个过程。

后来在云+社区看到一篇文章：《1个开发如何撑起一个过亿用户的小程序》，以为能够尝试一下新的开发方式。通读小程序云开发文档以后，发现并不须要学习新的技术就能够快速上手。

2. 开发

Mango Daily 使用的是小程序原生开发+云开发结合的方式进行开发的。

2.1 界面开发

界面没有使用第三方UI框架，而是本身将经常使用的模块封装成了组件。

图中比较核心的模块包括 TabBar、Toast、Modal、Nav等。

2.2 云开发

云开发包括云数据库，云函数和云存储。本项目中三个功能均使用到。

2.2.1 云数据库

云数据库是一个非关系型数据库，在实际开发中基本符合本项目的需求。部分表关联查询则是经过分步查询的方式代替。

云数据库已经实现了自动鉴权，能够保证数据的安全性。目前云数据库只支持如下几种权限：

• 全部用户可读，仅建立者可读写
• 仅建立者可读写
• 全部用户可读
• 全部用户不可读写

默认状况下是***仅建立者可读写***，因此在首次开发时，手动插入的测试数据并不必定能够在前端顺利读取，须要修改集合的权限。

云数据库的调用在前端代码中便可完成。可是从上面几种读写权限来看，并无办法实现对另外一个用户建立的数据进行修改或者删除的操做(固然这也是很是不可取的)，因而云函数就派上用场了。

2.2.2 云函数

我理解的云函数，则是跑在云端的一个函数脚本文件。

在接触云开发以前，若是咱们想要去调用微信公众平台提供的API(例如发起退款、发送模板消息等)，则须要在后端代码去实现，而后只须要给前端返回一个JSON表示请求状态便可。或者想要去实现上述描述中，修改一条由他人建立的数据的功能时，都是有后端工程师去完成的。

在本次开发中，我深入体会到了云函数的强大，以及微信公众平台工程师设计产品的严谨性。

Mango Daily用到了微信公众平台的模板消息功能，因此须要在合适的时机请求微信官方提供的API。

由于取消了后端的开发，因此一开始打算直接在小程序端去请求官方API。可是失败了。由于此请求涉及APPKEY等重要信息，禁止在小程序端代码中直接请求官方API。这样就能够经过云函数去代替先前的后端开发，最后将状态返回给小程序端便可。

例如想给新用户发送一条短信，以往的作法是客户端请求后端API，而后由后端完成发送短信操做。这里云函数就代替了后端开发。若是仅仅依靠小程序JS代码去发送短信，是很是不可取的。

另外，云函数对云数据库有更高的操做权限，因此想要修改、删除他人生成的数据时，云函数能够直接进行操做。

云函数还提供定时触发功能，不过在本项目中暂未涉及。

2.2.3 云存储

本次开发省去了使用其余服务商的存储服务，所有得力于云存储功能。云存储容许上传多种文件类型，像图片、音频等文件还能够直接在小程序端调用。这里咱们使用云存储实现了文章插图的功能。

2.3 优化

2.3.1 数据层封装

Mango Daily 数据操做进行了两次封装，一层是对云数据库API进行封装，第二层是每个数据集合都对应一个Manager管理层。

以用户集合 User，Article 为例，项目中的结构以下：

util |- db.js

manager |- Article.js |- User.js

db.js 是对云数据库API的封装，实现了增删查改等操做，以更新数据为例。

/** * 更新数据 */
const update = (collection, _id, data) => {
    return new Promise((resolve, reject) => {
        if (!exist(collection)) {
            reject(401, resCode[401]);
        }
    
        db.collection(collection).doc(_id).update({
            data: data
        }).then(res => {
            resolve(res);
        }).catch((code, msg) => {
            reject(code, msg);
        });
    });
}
复制代码

Article.js 是文章集合的管理类，一样实现了增删查改等操做，不过其是基于 db.js 进行扩展的。以更新文章操做为例：

/** * 更新 */
const update = (_id, data) => {
    return new Promise((resolve, reject) => {
        db.update(collection, _id, data).then(res => {
            resolve(res);
        }).catch((code, msg) => {
            reject(db.errMsg);
        });
    });
}
复制代码

之因此封装两层，是想尽可能减小Page对象中对云数据库的直接调用。这样在页面js文件中只须要调用某一个Manager提供的函数便可。

2.3.3 后台上传策略

Mango Daily还实现了发送模板消息的功能，这就涉及到了FromID的收集。目前FromID的收集大部分采用埋点的方式。 若是每次采集到新的FromID都直接上传到数据库存储，可能会形成网络资源的浪费，因此须要选择合适的时机上传数据。

在本项目中，每次采集到FromID，首先存到 globalData 中，当小程序进入后台状态时，再进行数据的上传。

app.js 中的实现：

/** * 后台监听 */
onHide: function() {
    this.uploadFormID();
},

/** * 上传token */
uploadFormID: function() {
    let ids = this.globalData.formIds;
        
    if (ids.length == 0) {
      return ;
    }
    
    let formId = ids.pop();
    
    this.push.upload(formId).then(_ => {
      console.log("上传formID:" , formId);
      this.uploadFormID();
    }).catch(err => {
      console.log(err);
    });
},
复制代码

3. 维护

很遗憾，这一部分可能没有太多须要写的。 在18年的项目中，须要考虑数据库的维护问题。可是使用了云开发以后，Serverless的优势就表现出来了。我无须将太多的精力放在后端的维护上。

4. 总结

在本次项目开发中，我深入体会到了云开发的便捷性。无须本身实现鉴权，对接第三方存储。数据方面，增删查改功能很是方便。云开发提供的种种便利，让我在有新创意的时候，优先选择小程序+云开发的方式去实现。

你好，你的小程序涉及用户自行生成内容的发布/分享/交流，属社交范畴，为我的主体小程序未开放类目，建议申请企业主体小程序
复制代码

另外，Mango Daily中的随笔功能属于用户自行生成内容功能，因此在上架的时候，我的开发者帐号是不被容许的，因此在考虑上架产品的时候，请按照实际状况酌情考虑选择帐号主体类型。

源码地址

github.com/TencentClou…

---

若是你想要了解更多关于云开发CloudBase相关的技术故事/技术实战经验，请扫码关注【腾讯云云开发】公众号～