Taro 小程序开发大型实战（八）：尝鲜 LeanCloud Serverless 云服务

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

• 熟悉的 React，熟悉的 Hooks：我们用 React 和 Hooks 实现了一个非常简单的添加帖子的原型
• 多页面跳转和 Taro UI 组件库：我们用 Taro 自带的路由功能实现了多页面跳转，并用 Taro UI 组件库升级了应用界面
• 实现微信和支付宝多端登录：实现了微信、支付宝以及普通登录和退出登录
• 使用 Hooks 版的 Redux 实现大型应用状态管理（上篇）：使用 Hooks 版的 Redux 实现了 user 逻辑的状态管理重构
• 使用 Hooks 版的 Redux 实现大型应用状态管理（下篇）：使用 Hooks 版的 Redux 实现了 post 逻辑的状态管理重构
• Taro 小程序开发大型实战（六）：尝鲜微信小程序云（上篇）： user 逻辑接入微信小程序云
• Taro 小程序开发大型实战（七）：尝鲜微信小程序云（下篇）：post 逻辑接入微信小程序云

在上两篇文章中，我们讲解了使用微信小程序云作为我们的小程序后台，然后我们跑通了我们的注册登录、创建帖子、获取帖子列表、获取帖子详情的全栈流程，如果只想了解微信小程序的全栈开发流程的话，之前的文章已经足够了，如果还想了解跨端开发全栈开发流程的话（当然用 Taro 的同学估计也比较期待跨端的全栈开发流程，手动滑稽）接下来这篇文章就是你的菜了😆

首先我们先来看一下最终的运行效果：

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

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

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

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

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

此教程属于 React 前端工程师学习路线的一部分，欢迎来 Star 一波，鼓励我们继续创作出更好的教程，持续更新中~

在这一篇文章中，我们将接入 LeanCloud Serverless 服务，它类似微信小程序云，只不过它没有平台属性，所有的端都可以便捷访问，相信你已经迫不及待了，让我们马上开始吧💪！

小程序接入外网的流程

因为小程序是封装在一些巨型 App 应用里的沙盒环境之内，所以对于接入外站的服务需要一些特殊的流程，我们在这里总结一下：

• 注册外站服务的账号
• 找到对应的小程序开发接入指南
• 获取对应的接入地址，将接入地址填入小程序后台的白名单列表
• 在小程序实际接入，并进行测试

在这篇文章中，我们的外站特指 LeanCloud Serverless 云服务，小程序特指微信小程序和支付宝小程序。

好的，了解了流程之后，我们现在来走一遍流程来将我们的 LeanCloud 接入到微信/支付宝小程序。

注册外站服务的账号

访问 LeanCloud 网址：点我访问，完成注册登录流程。

找到对应的小程序开发接入指南

这里我们找到 LeanCloud 微信/QQ 小程序接入指南：点我访问

注意

LeanCloud 没有提供支付宝的接入指南，但是小程序接入指南都基本类似，我们会一一讲解这一流程。

获取对应的接入地址

LeanCloud 已经有详细的链接提示如何接入：

对于支付宝小程序的白名单配置地址如下：点我访问。

在小程序实际接入，并进行测试

最后我们需要进行小程序的实际接入，因为 LeanCloud 并没有提供支付宝小程序的 SDK 包，这里对于支付宝小程序我们使用 LeanCloud 提供的 REST 接口进行访问，具体地址如下：点我访问。

定义 LeanCloud 相关的辅助函数

对于接入 LeanCloud，我们需要在应用中做一系列初始化环境的准备，在 src/api/ 文件夹下创建 utils.js 文件，并在其中编写内容如下：

const API_BASE_URL = ''

const LOGIN_URL = `${
     API_BASE_URL}/1.1/functions/login`
const CREATE_POST_URL = `${
     API_BASE_URL}/1.1/functions/createPost`
const GET_POST_URL = `${
     API_BASE_URL}/1.1/functions/getPost`
const GET_POSTS_URL = `${
     API_BASE_URL}/1.1/functions/getPosts`

const HEADER = {
   
  'X-LC-Prod': 1,
  'X-LC-Id': '',
  'X-LC-Key': '',
}

const convertUserFormat = user => {
   
  const _id = user.objectId
  delete user.objectId

  return {
    ...user, _id }
}

const convertPostFormat = post => {
   
  const _id = post.objectId
  const user = convertUserFormat(post.user)

  delete post.objectId
  delete post.user

  return {
    ...