微信小程序开发：云开发入门

在前面的章节中，我们用 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 吐槽？来评论区！