微信小程序开发：云开发入门
3281 views, 2023/10/17 updated Go to Comments
在前面的章节中，我们用 Django 作为小程序的后端，实现了一个简单的 web 版待办清单。
观察一下你会发现，在 Django 和小程序通讯的过程中，居然是登录和鉴权的环节占用了最多的代码篇幅。考虑到鉴权是个非常通用的功能，有没有方法省去这个环节呢？还真有，那就是微信云开发了。
本文是Django-微信小程序开发教程的延续。新读者可将示例代码下载一份，对照阅读。
什么是云开发
微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。
对于中小型开发团队来说， 它的优势有：
- 无需搭建服务器，后端能力全部依靠微信的接口来提供。因此你可以快速的开发业务，而且后端资源根据业务流量自动扩容，无自购服务器的闲置成本。
- 免登录和鉴权。无需管理证书、签名、秘钥，直接调用微信 API 。复用微信私有协议及链路，保证业务安全性。
- 学习成本低。云开发采用 Javascript 语言，你只要学会 Javascript，就可以前后端通吃了。
和 Django 作为后端相比，云开发也有一些劣势：
- 定制化能力稍弱，这是由于微信提供的某些接口的限制造成的。如果你的需求比较复杂，那么可能需要更多的技巧，去规避云开发的条条框框，而 Django 就没有这些，反正是你自己的服务器，想怎么搞都可以。
- 大型的项目通常需要配备功能强大的后台能力，这方面云开发同样具有局限性。
总结而言，对于中小型团队，云开发上手快、入门成本低，缺点基本可以忽略，非常具有学习的价值。
准备云开发环境
云开发要求小程序必须要有 AppID，因此像前面开发时用测试号就不行了。
首先你需要在微信公众平台注册一个小程序账号。
注册完成后，还需要填写基本信息：
完成后就可以在设置页面看到 AppID 了：
接着回到开发工具，修改 AppID 信息：
如果是新创建的项目，可以直接在引导窗口中勾选 AppID，以及勾选云开发选项，可以快速生成云开发环境。
点击工具栏的云开发控制台按钮：
弹出下面的窗口：
- 环境名称：test。一个小程序最多可以有2个隔离的云环境，通常来说测试环境取名为 test，以后的正式环境可取名为 release。
- 付费方式：按量付费，具有一定的免费额度。在少量用户时等同于免费。
点击开通，等待几分钟后，云环境就可以使用了。
准备工作就顺利搞定了。
初始化云环境
配置好了云环境后，你还需要在小程序中获取到它。
app.js 是小程序的入口，非常适合在这里初始化云。
因此将其修改为下面这样：
// app.js
App({
onLaunch() {
this.initcloud()
this.globalData = {
// 用于存储待办记录的集合名称
collection: 'todo',
}
},
// 初始化云开发环境
initcloud() {
wx.cloud.init({
traceUser: true,
// 这里填写你的云环境id
env: "test-8g..xxx..83f55"
})
// 装载云函数操作对象返回方法
this.cloud = () => {
return wx.cloud // 直接返回 wx.cloud
}
},
// 获取云数据库实例
async database() {
return (await this.cloud()).database()
},
})
onLaunch()是生命钩子方法，小程序在启动时会自动执行。此方法中调用了initcloud()方法。initcloud()里调用了微信内置的接口，初始化了云环境，并且将云环境注入为了 app 的一个对象。注意此处的test-8g..xxx..55需要换成你自己的环境名称，它在云开发控制台的右上角可以找到。database()方法用于返回云数据库对象，后续读写数据会用到。注意，云环境接口很多都是异步的（对于通络通讯来说，这是理所应当的），因此会频繁用到await或者async关键字，不熟悉的同学去重新温习相关语法标准。
此外，onLaunch() 方法中还在全局状态中存储了云数据库集合的名称 todo 。你把集合理解成关系型数据库中的表就可以了。
因此，还需要做一个小工作，就是在云开发控制台中，添加 todo 这个集合：
如此一来，云环境就随着小程序的启动而初始化了。
添加新待办
让我们先尝试下如何将数据添加到云数据库中。
前面章节中，代码核心是和 Django 后端通讯，所以需要大改。
将 pages/index/index.js 修改为下面这样：
// pages/index/index.js
Component({
// 页面持有的数据
data: {
// todo-list数据
items: [],
// 输入框当前内容
inputedValue: "",
},
methods: {
// 辅助函数，生成一个随机的id
getUUID(randomLength = 12) {
return Math.random().toString().substr(2, randomLength) + Date.now().toString(36)
},
// 监听输入框按键
keyInput(e) {
this.setData({
inputedValue: e.detail.value
})
},
// 提交数据
inputSubmit() {
// 设置新条目的id
const newID = this.getUUID()
const newItem = {
id: newID,
content: this.data.inputedValue,
checked: false,
}
// 将新条目更新到items状态中
// 并将输入框的值清空
let items = JSON.parse(JSON.stringify(this.data.items))
items.unshift(newItem);
this.setData({
items: items,
inputedValue: "",
})
// 将items提交到云数据库
this.uploadData(newItem)
},
// 上传数据到云数据库
async uploadData(item) {
const db = await getApp().database()
db.collection('todo').add({
data: item
})
},
})
最核心的代码就是最后这个 async uploadData() 方法了。可以看到调用云数据库接口是非常简单的：
getApp()获取到小程序对象，并从中拿到云数据库对象。- 通过接口
add()将数据添加到云数据库中。
这就ok了！其他的方法都很常规，比如监听输入框、提交数据到本地状态，就不展开讲了。
数据提交到云中时，后台会自动添加一个
_id属性（可通过回调拿到），因此实际上代码中赋值的id是多余的。不过为了尽可能少的改动原有代码，本文暂时就这样安排了。读者可自行尝试优化。
运行模拟器，让我们测试下。
首先随便输入点东西：
点击提交按钮：
待办添加到了清单中，这是没悬念的。
有意思的来了。打开云开发控制台，看看云数据库：
如前面所说，_id 是云后台自动添加的，可作为数据的唯一身份。_openid 同样是云后台自动添加的，是微信用户的唯一身份凭证。
再重复一次，由于云数据库会自动添加
_id字段，所以id理论上是多余的。本文中这样设计是为了后续少改动代码。而你可以将其优化掉。
怎么样，云开发也没那么玄乎吧。
总结
发现没有，前面章节中那么多登录和鉴权的环节，在云开发这里全都消失了，无形之中少了很多代码。微信和云都是自家的产品，沟通起来就是顺畅啊，没办法。从这个方向来讲，云开发比 Django 后台更加的简洁高效。
下一章我们再继续深入，搞点别的功能。
心急的同学，可扫码体验云开发的比较完整的例子：
上面的小程序对 UI 和反馈做了优化（微信小程序发布规范），但核心功能和教程中是大体相同的。
最后附上云开发官方文档，有问题多多查询。
点赞 or 吐槽？来评论区！
