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

298 views, 2022/07/11 updated   Go to Comments

在前面的章节中,我们用 Django 作为小程序的后端,实现了一个简单的 web 版待办清单。

观察一下你会发现,在 Django 和小程序通讯的过程中,居然是登录和鉴权的环节占用了最多的代码篇幅。考虑到鉴权是个非常通用的功能,有没有方法省去这个环节呢?还真有,那就是微信云开发了。

本文是Django-微信小程序开发教程的延续。新读者可将示例代码下载一份,对照阅读。

什么是云开发

微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。

对于中小型开发团队来说, 它的优势有:

  • 无需搭建服务器,后端能力全部依靠微信的接口来提供。因此你可以快速的开发业务,而且后端资源根据业务流量自动扩容,无自购服务器的闲置成本。
  • 免登录和鉴权。无需管理证书、签名、秘钥,直接调用微信 API 。复用微信私有协议及链路,保证业务安全性。
  • 学习成本低。云开发采用 Javascript 语言,你只要学会 Javascript,就可以前后端通吃了。

和 Django 作为后端相比,云开发也有一些劣势:

  • 定制化能力稍弱,这是由于微信提供的某些接口的限制造成的。如果你的需求比较复杂,那么可能需要更多的技巧,去规避云开发的条条框框,而 Django 就没有这些,反正是你自己的服务器,想怎么搞都可以。
  • 大型的项目通常需要配备功能强大的后台能力,这方面云开发同样具有局限性。

总结而言,对于中小型团队,云开发上手快、入门成本低,缺点基本可以忽略,非常具有学习的价值。

准备云开发环境

云开发要求小程序必须要有 AppID,因此像前面开发时用测试号就不行了。

首先你需要在微信公众平台注册一个小程序账号。

注册完成后,还需要填写基本信息:

todo-110-1

完成后就可以在设置页面看到 AppID 了:

todo-110-2

接着回到开发工具,修改 AppID 信息:

todo-110-3

如果是新创建的项目,可以直接在引导窗口中勾选 AppID,以及勾选云开发选项,可以快速生成云开发环境。

点击工具栏的云开发控制台按钮:

todo-110-4

弹出下面的窗口:

todo-110-5

  • 环境名称: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 这个集合:

todo-110-6

如此一来,云环境就随着小程序的启动而初始化了。

添加新待办

让我们先尝试下如何将数据添加到云数据库中。

前面章节中,代码核心是和 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 是多余的。不过为了尽可能少的改动原有代码,本文暂时就这样安排了。读者可自行尝试优化。

运行模拟器,让我们测试下。

首先随便输入点东西:

todo-110-7

点击提交按钮:

todo-110-8

待办添加到了清单中,这是没悬念的。

有意思的来了。打开云开发控制台,看看云数据库:

todo-110-29

如前面所说,_id 是云后台自动添加的,可作为数据的唯一身份。_openid 同样是云后台自动添加的,是微信用户的唯一身份凭证。

再重复一次,由于云数据库会自动添加 _id 字段,所以 id 理论上是多余的。本文中这样设计是为了后续少改动代码。而你可以将其优化掉。

怎么样,云开发也没那么玄乎吧。

总结

发现没有,前面章节中那么多登录和鉴权的环节,在云开发这里全都消失了,无形之中少了很多代码。微信和云都是自家的产品,沟通起来就是顺畅啊,没办法。从这个方向来讲,云开发比 Django 后台更加的简洁高效。

下一章我们再继续深入,搞点别的功能。

心急的同学,可扫码体验云开发的比较完整的例子:

pocket-todo

上面的小程序对 UI 和反馈做了优化(微信小程序发布规范),但核心功能和教程中是大体相同的。

最后附上云开发官方文档,有问题多多查询。

点赞 or 吐槽?来评论区!




本文作者: 杜赛
发布时间: 2022年07月11日 - 17:12
最后更新: 2022年07月11日 - 17:12
转载请保留原文链接及作者
本站使用 Github 评论后端。鉴于国内复杂的网络环境,如遇评论无法加载、发表等问题,请尝试刷新页面,或更换上网姿势。