Taro 小程序开发大型实战（六）：尝鲜微信小程序云（上篇）

欢迎继续阅读《Taro 小程序开发大型实战》系列，前情回顾：

• 熟悉的 React，熟悉的 Hooks：我们用 React 和 Hooks 实现了一个非常简单的添加帖子的原型
• 多页面跳转和 Taro UI 组件库：我们用 Taro 自带的路由功能实现了多页面跳转，并用 Taro UI 组件库升级了应用界面
• 实现微信和支付宝多端登录：实现了微信、支付宝以及普通登录和退出登录
• Hooks + Redux 双剑合璧：使用了 Hooks 版的 Redux 来重构应用的状态管理
• 使用 Hooks 版的 Redux 实现大型应用状态管理(上篇)：使用 Hooks 版的 Redux 实现了 user 逻辑的状态管理重构
• 使用 Hooks 版的 Redux 实现大型应用状态管理(下篇)：使用 Hooks 版的 Redux 实现了 post 逻辑的状态管理重构

如果你敲到这里，会发现我们之后的内容都是纯前端(小程序端)的逻辑，一个完整的可上线小程序应用应该还要有后端，在这篇文章中，我们将使用微信小程序云作为我们的后台，接着我们会引进 redux-saga 来帮助 Redux 优雅的处理异步流程，本文最终的实现效果如下：

如果你不熟悉 Redux，推荐阅读我们的《Redux 包教包会》系列教程：

• Redux 包教包会(一)：解救 React 状态危机
• Redux 包教包会(二)：趁热打铁，完全重构
• Redux 包教包会(三)：各司其职，重拾初心

如果你希望直接从这一步开始，请运行以下命令：

git clone -b miniprogram-start https://github.com/tuture-dev/ultra-club.git
cd ultra-club

本文所涉及的源代码都放在了Github 上，如果您觉得我们写得还不错，希望您能给️这篇文章点赞+Github仓库加星️哦~

为了将数据持久化存储和高效的查询，我们需要把数据存储到数据库中，为了实现⼩程序端便捷的开发体验，⼀大批小程序 Serverless 服务兴起，⽽微信⼩程序云正是为了微信⼩程序的快速开发⽽生的。在这篇⽂章中，我们将使⽤微信小程序云作为我们的后端，并讲解如何引入和实现 Redux 异步工作流来实现小程序端访问⼩程序云的状态管理。

微信小程序云初尝鲜

在前面的代码中，我们通过将数据保存在 Storage 里面来完成数据的持久化，这样可以解决小规模数据的存储和查询问题，一旦数据量变大了，那么查询和存储就需要依靠专门的数据库来解决了，一般我们可以通过自建后端和数据库的方式来解决，但当小程序正越来越火的同时，一种被称为 Serverless 的模式被提出并也逐渐火爆起来，通俗意义上来概括就是 “无后端”，即把后端交给云服务厂商(阿里云、腾讯云、京东云等)，开发者只需要专注于前端逻辑，快速交付功能。

一般的小程序 Serverless 服务都包含三大功能：

• 数据库：一般是以 JSON 数据格式进行存储，可以将数据存储在云端数据库中。
• 存储：支持文本、图片等用户生成内容的存储，可以获取资源的链接进行使用。
• 云函数：可以用 Node.js 进行开发，自己编写对应的后端逻辑，并把写好的代码传到云端，然后在小程序前端使用 API 进行调用。

关于小程序 Serverless 的详细描述，这里推荐一篇文章，有兴趣的同学可以详细了解一下：什么是小程序Serverless？

在这一节中，我们使用微信小程序云作为我们的 “后端”，微信小程序云和小程序账号绑定在一起，一个小程序账号可以开通一个小程序云空间，接下来我们来详细讲解如何开通小程序云。

开通小程序云

1. 首先确保你注册了小程序的微信公众平台账号：注册地址。
2. 登录之后，在菜单栏开发 > 开发设置里面找到 AppID，他应该是一个18位字符串。
3. 使用微信开发者工具打开我们的 ultra-club 项目文件夹，然后在微信开发者工具菜单栏中选择设置 > 项目设置，打开设置栏：

4.找到设置栏的基本信息，AppID 栏将其修改为上面的 AppID 如下：

5.当设置了 AppID 之后，我们的开发者工具里面的 “云开发” 按钮应该就会变成可点击状态，找到左上角的 “云开发” 的按钮并点击，类似下面这张图：

4.点击 ”云开发“ 按钮之后会弹出确认框，点击同意就会进到小程序云开发控制台：

进来之后我们首先看到的是云开发控制台的 ”运营分析“ 界面，这是用来可视化云开发各类资源的使用情况的界面，在这篇教程中我们不会讲解这方面内容。我们主要来讲一下图中标红的部分：

• 其中序号为 1 的就是我们的云数据库，它是一个 JSON 数据库，里面存储着我们在开发时需要的数据。
• 序号为2的是存储，即我们可以上传一些文本、图片、音/视频，然后返回给我们访问这些资源的链接。
• 序号3是云函数，即我们可以在这里面管理一些我们编写的的后端 Node.js 逻辑，它运行在云中，我们可以在小程序端通过 API 来调用它们。
• 序号4是代表我们此次的云环境的标识符，可以用于在小程序端以 API 调用云开发资源时标志此时的调用的云环境。

在本篇教程中，我们会用到上面提到的数据库和云函数两项功能。

创建数据库表

介绍完小程序云的界面，我们马上来动手实践，来创建我们需要的数据库表，因为我们前端逻辑主要分为 user 和 post 两类逻辑，所以我们在数据库中创建两张表：

这里我们具体来解释一下这个数据库操作界面的含义：

• 可以看到，点击云开发控制台左上角的第二个按钮，然后点击图中标红序号为1的 “+” 按钮，创建两个集合 user 和 post，这样我们就创建好了我们的数据库表。
• 序号为2表示我们可以选中某个集合，点击右键进行删除操作。
• 序号为3表示我们可以给某个集合添加记录，因为是 JSON 数据库，集合中每条记录都可以不一样。
• 序号4表示我们可以选中某条记录，点击右键进行删除操作
• 序号5表示我们可以给单个记录添加字段
• 序号6表示我们可以选中单个记录进行删/改操作
• 序号7表示我们可以查询这个集合中某条记录

创建 post 记录

这里我们添加了一条默认的 post 记录，表示之前我们之前小程序端的那条默认数据，这条数据记录了 post 的相关信息：

• _id： 此条数据的唯一标识符
• title： 文章标题
• content： 文章内容
• user： 发表此文章的用户，这里我们为了方便起见，直接保存了用户的完整信息，一般的最佳实践建议是保存此用户的 _id 属性，然后在查询 post 时，取出此用户的 _id 属性，然后去查 user 得到用户的完整信息。
• updatedAt：此条记录的上次更新时间
• createdAt：此条记录的创建时间

创建 user 记录

上面我们提到了我们在这条文章记录里面保存了发帖作者信息，那么当然我们的 user 集合中就要新建一条此作者的信息如下：

可以看到，我们添加了一条用户记录，它的字段如下：

• _id：此用户在 user 集合中的唯一标识符
• avatar：此用户的头像地址
• nickName：此用户的昵称，我们将用它来进行登录
• createdAt：创建此记录的时间
• updatedAt：上次更新此记录的时间

在小程序端初始化小程序云环境

在开通了小程序云之后，我们还需要在小程序前端代码中进行小程序云环境的初始化设置，这样才能在小程序前端调用小程序的 API。

打开 src/index/index.jsx 文件，在其中添加如下的代码：

import Taro, { useEffect } from '@tarojs/taro'

// ... 其余代码一致

export default function Index() {
  // ... 其余代码一致
  useEffect(() => {
    const WeappEnv = Taro.getEnv() === Taro.ENV_TYPE.WEAPP

    if (WeappEnv) {
      Taro.cloud.init()
    }

  // ...其余代码一致
  return (
    <View className="index">
      ...
    </View>
  )
}