小程序云开发实战总结

基于微信小程序云开发，我搭建了两款百科类的小程序

我会从云开发基本能力与场景实战两个方面来总结一篇我的实战过程中的心得

希望这篇文章可以对刚接触云开发的掘友有所帮助。

项目地址：hogB/hoewo (github.com)

项目预览：

准备

在搭建之前我们需要做一些准备

1. 使用一个未注册微信公众平台的邮箱
2. 使用该邮箱申请一个小程序账号
3. 拿下AppID（这里需要注意的是，如果没有appid是无法使用云开发服务）
4. 在开发者工具中使用AppID创建一个项目

如果你从0开始

可以使用开发者工具的云开发模板，快速创建一个云开发项目

如果你已经拥有项目

可以在项目基础上使用云开发

5. 最后在云开发控制台开通云开发，并拿到环境ID。

基本能力

云开发主要包含云函数，云存储，数据库等基本能力，云开发官方文档介绍：微信开放文档 (qq.com)，这里不再赘述

云函数

云函数，词如其名，即运行在云端环境的函数，其运行环境为node，可以简单地概括一下他的作用

只需要一行代码就可以完成数据操作

基本使用

构建我们的第一个云函数（这里为在原来的基础上使用云开发的步骤）

1. 在项目根目录创建一个cloud文件夹，用来存放我们的云函数
   
2. 在project.config.json配置文件中配置云函数存储路径

"cloudfunctionRoot": "cloud/"
复制代码

1. 查看开发者工具中该文件是否出现云端logo，若出现则说明配置完成
   
2. 新建一个云函数，右键我们的云函数目录文件，如下，开发者工具会自动生成一个云函数模板供我们使用，具体的云函数配置介绍可以直接参考官方文档：我的第一个云函数 | 微信开放文档 (qq.com)
   

5. 编写好我们的云函数后，将我们的云函数上传到云端

6. 上传后我们就可以调用我们的云函数

wx.cloud.callFunction({
     name: 'login',
}).then(res => {})
复制代码

数据库

云开发数据库为JSON 数据库，所以没接触过的小伙伴上手起来是非常快的

创建

我们可以在云开发控制台中创建我们的数据集合，导入数据记录

1. 创建并命名一个集合
2. 在集合中添加数据记录，可以使用手动或者json格式
3. 每个数据记录都会生成唯一标识符即 _id

增删改查

官方增删改查文档增删改查，提供了增加add()，查询where()，唯一查询doc，删除remove()等数据库操作api，当然我们可以联合使用这些api来达到我们的目的，因为官方给出的非常详细，在这里也不再赘述，下面举一个简单的例子来让大家快速入门使用，比如我想要删除collects集合中一个作者为"猪痞恶霸"，标题为"微信小程序万字总结"的数据记录，那么我们可以这么做。

let db = wx.cloud.database()
db.collection('collects').
  where({
      name : "猪痞恶霸",
      title: "微信小程序万字总结"
}).remove({
    success: res => {}
})
复制代码

权限管理

数据库的权限管理是一个奇怪的踩坑点

在刚刚入门使用的时候就遇到这么一个坑，调用查询函数，拿不到数据，奇了个怪，这就是因为没有打开数据权限导致的问题

在每个集合中都会有一个权限管理，支持如下四个数据权限，除此之外还可以自定义数据权限。

• 所有用户可读，仅创建者可读写
• 仅创建者可读写
• 所有用户可读
• 所有用户不可读写

如果我们想要对用户展现某些数据，比如商品信息，那么我们就可以将权限更改为所有用户可读，如果我们想为用户展示他的todo待办项，那么我们就可以将权限更改为仅创建者可读写

批量导入

一个项目中如果需要存储大量的数据，一条一条手动导入json也是非常耗费时间的，而云开发数据库控制台支持我们直接导入json文件，orz太爽了。

1. 可以先创建一个集合模板，通过数据库导出为json文件
2. 导入我们的数据到json中
3. 导入，自动生成 _id

注意：由于 _id为自动生成的，所以我们的json文件每个数据记录中无需 _id ，如果存在导入就会导致报错，导入失败。

云存储

很多功能都需要存储一些图片文件资源，如用户上传的图片，使用云存储来存储这些资源。

存储控制台

在云开发存储控制台台中我们可以创建或者上传文件夹or文件，同一目录下会生成相同的序列+文件名

当然存储也有权限管理其和数据库权限相同，根据不同的场景制定不同的权限规则，并且小程序的相关组件如image，video可以直接通过FileID来对资源进行加载。

<image src="cloud://cloud1-0gekdmc8c1d576f8.636c-cloud1-0gekdmc8c1d576f8-1311277417/mingjia/linliankun.png"></image>
复制代码

基本使用

如果我们想操作文件，那么我们可以调用api，官方api文档：API 指引

上传文件wx.cloud.uploadFile，删除文件wx.cloud.deleteFile，下载文件wx.cloud.downloadFile等

场景实战

第一部分的基础能力了解完之后，你肯定对于云开发有了基本的能力

第二部分为场景实战，我将自己的实战经历整理了出来，满满的干货

登录

进行云开发让我感触最深的就是登录模块了，我们来对比一下云开发和非云开发登录的流程

非云开发登录

1. 调用wx.login()获取code
2. 调用wx.request()将code发送到我们自己的服务器
3. 服务端需要凭借appID,appsecret,code通过微信接口服务拿到session_key与openid
4. 将登录状态返回给小程序，小程序再其存储到storage中

云开发登录

1. 调用login云函数，即可拿到openid

这仅仅只是登录步骤的区别，其实就是少了中间商赚差价，云开发没有了中介，所以就少了繁琐的步骤，我们来实际看一下云开发登录的实现

1. 在云函数目录下创建一个login的云函数并部署到云端
2. 调用 wx.getUserProfile获取用户的头像与昵称信息（自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息）
3. 存储用户基本信息在storage中
4. 调用云函数login
5. 存储调用登录云函数拿到的openid到storage

wx.getUserProfile({desc: '用户完善会员资料'})
.then(res => {
      wx.setStorageSync('userInfo', res.userInfo)
      wx.cloud.callFunction({name: 'login',})
          .then(res => {
               this.setData({
                   openid: res.result.openid
               })
           wx.setStorageSync('openid', res.result.openid)
           })
})
复制代码

收藏

收藏功能在很多应用中都很常见，商品收藏，小说收藏，文章收藏，等等

大致分为三个模块，分别为：加入收藏，收藏列表，取消收藏

首先需要先建立一个collect收藏集合，并将这个集合的数据权限设置为仅创建者可读写。

加入收藏

将一本书加入用户收藏，那么则需要我们将书的信息，与用户openid作为一个数据记录加入我们的collect集合中

wx.cloud.database().collection('collects').add({
                data: {
                    title: this.data.title,
                    intro: this.data.intro,
                    img: this.data.img,
                    isCollect: true,
                },
                success: res => {
                }
            })
复制代码

需要注意的是，我们无需手动地去添加openid这个字段，因为在用户添加地过程中会自动附加上用户的openid，非常好用，在加入收藏后，我们就可以在我们的数据集合中看到我们加入的书本，其额外多的是唯一标识_id与用户_openid。

收藏列表

获取用户的收藏列表，只需要我们通过_openid这个数据条件获取用户的收藏书本信息

1. 锁定集合collection('collects')
2. 筛选数据where()

wx.cloud.database().collection('collects').where({
                _openid: openid
            }).get().then(res => {})
复制代码

取消收藏

取消用户收藏，与加入收藏异曲同工，只要将add操作替换为remove操作，将查询信息更改为opneid与书本名

wx.cloud.database().collection('collects').where({
            _openid: openid,
            title: this.data.title
        }).remove({
            success: res => {}
})
复制代码

内容详情

商品详情信息，书本内容，等等场景都需要内容的加载渲染

我在我的项目中将wxparse进行了二次组件封装，简单的使用可能太过臃肿，下面我概述了封装的步骤

项目中组件目录下的prebuild为封装的组件，大家可以参考使用