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

时间  2020-12-26
标签 css html 前端 react git github 数据库 redux 小程序 segmentfault 栏目 云服务 繁體版
原文   原文链接

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

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

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

首先咱们先来看一下最终的运行效果：前端

若是你不熟悉 Redux，推荐阅读咱们的《Redux 包教包会》系列教程：react

若是你但愿直接从这一步开始，请运行如下命令：git

git clone -b leancloud-start https://github.com/tuture-dev/ultra-club.git
cd ultra-club
本文所涉及的源代码都放在了 Github 上，若是您以为咱们写得还不错，但愿您能给 ❤️这篇文章点赞+Github仓库加星❤️哦~

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

在这一篇文章中，咱们将接入 LeanCloud Serverless 服务，它相似微信小程序云，只不过它没有平台属性，全部的端均可以便捷访问，相信你已经火烧眉毛了，让咱们立刻开始吧💪！数据库

小程序接入外网的流程

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

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

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

好的，了解了流程以后，咱们如今来走一遍流程来将咱们的 LeanCloud 接入到微信/支付宝小程序。segmentfault

注册外站服务的帐号

访问 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 { ...post, _id, user }
}

const convertPostsFormat = posts => {
  const convertedPosts = posts.map(post => convertPostFormat(post))

  return convertedPosts
}

export {
  LOGIN_URL,
  HEADER,
  CREATE_POST_URL,
  GET_POST_URL,
  GET_POSTS_URL,
  convertPostsFormat,
  convertPostFormat,
  convertUserFormat,
}

能够看到，上面的代码主要分为四个部分：

  • 定义云函数的 REST URL，LeanCloud 的云函数 REST URL 的格式相似这样：https://API_BASE_URL/1.1/functions/functionName，其中 API_BASE_URL 能够经过文档获取：点我访问；而 functionName 即为咱们须要调用的云函数名字。这里咱们定义了 API_BASE_URL ，咱们给了空字符串，读者能够根据 LeanCloud 给与的 Base URL 替代空字符串；一样咱们定义了四个云函数，分别表明登陆、创帖、查询帖子列表、查询单个帖子，具体的云端云函数咱们将在后面定义。
  • 第二个部分即为向 LeanCloud 服务器发送 REST 请求时须要携带的请求头部，这个也能够在文档里给出：点我访问；这里也须要用户用本身的内容来替换上面的空字符串。
  • 第三个部分则为两个辅助转换格式的函数，主要用于将 LeanCloud 数据库格式的数据与现有的微信小程序数据库格式的数据兼容。
  • 第四个部分为导出这些定义的内容，供其它模块使用。
提示

上面的 API_BASE_URL 和 HEADER 都须要用户在登陆的状况下访问给出的地址才能获取到。

在 LeanCloud 上面建立数据库表

登陆 LeanCloud 控制台，在左边栏的 存储 > 结构化数据 能够看到建立 Class 的按钮，咱们能够经过建立一个 Class 来建立一张数据库表：

能够看到咱们建立了两张表：Post 和 MyUser，一个存放和帖子相关的数据，一个存放和用户相关的数据。其中 MyUser 相似以前咱们在微信小程序数据库表时的 user 表。

定义 MyUser 字段

如图以前在微信小程序数据库表建立时同样，咱们一样为 MyUser 定义以下的字段：

  • avatar
  • nickName

至于读者看到的其它字段都是 LeanCloud 默认建立且自动更新的字段，用户不能够操做。

定义 Post 字段

一样和以前在微信小程序里面建立 post 同样，咱们给 Post 定义以下字段:

  • content
  • title
  • user

眼尖的同窗可能注意到了，这里的 user 字段是一个 Pointer 类型，它是 LeanCloud 数据表独有的引用类型，相似关系数据库里面的外键，即存一个指针，以后获取数据的时候能够便捷的获取对应的 user 数据。

关于默认 Class 的解释

这里有些读者可能有疑问，为何还有一些多余的表了？这些如下划线开头的 Class 实际上是 LeanCloud 默认建立的，不容许删除，用于 LeanCloud SDK 封装一系列经常使用且复杂的应用功能，供用户快速搭建 App/网站/小程序原型，好比相似微信的朋友圈功能，LeanCloud 提供开箱即用的逻辑，你能够直接调用。

而且，相似 _User 和 User Class 实际上是引用自同一个 Class，因此不能建立和 LeanCloud 默认的类具备同名且不带前缀下划线的类，好比 User ，File 类就不能建立，因此这里咱们建立了 MyUser 类，这样不用去考虑 _User 类自己存在的一些细节限制。

在 LeanCloud 上建立云函数

在上一步里面，咱们在小程序代码里建立了和 LeanCloud 有关的逻辑代码，其中咱们建立了四个云函数，如今咱们要建立对应这四个云函数的实际云函数。

注册并登录 LeanCloud 以后，点击左边栏的 云引擎 > 部署 能够看到相似下面的界面：

LeanCloud 提供给咱们在线建立和编写云函数的方便界面，使得咱们不用本身建立本地服务器代码和配置部署和运维过程，大大加速了程序的开发过程。

接下来，咱们将遵循如下三步走的方式来进行 LeanCloud 云函数的开发：

  • 建立云函数
  • 部署
  • 在小程序端进行调试

建立 User 逻辑 云函数

点击界面里面的建立按钮，会看到以下的界面：

能够看到上图分为以下几个部分：

  • 选择咱们要建立的函数类型，主要有三类，这里咱们选择 Function ，这也是默认选择的类型，其他两类读者有兴趣能够自行探索，这里咱们不展开讲。
  • 接着就是定义你的函数名，这里咱们填入 login。
  • 接着就是编写函数体，它是一个 Node.js 函数，咱们只须要编写对应的 Node.js 处理逻辑就能够了。
  • 最后咱们能够对这个函数写一点注释，方便往后回顾，这里咱们选择不填入。

好的，了解了建立函数的弹出层以后，咱们填入咱们须要建立的 login 函数体以下：

const { userInfo } = request.params

const query = new AV.Query('MyUser')
query.equalTo('nickName', userInfo.nickName)
const users = await query.find()

if (users.length > 0) {
    return users[0]
} else {
    const MyUser = AV.Object.extend('MyUser')
    const myUser = new MyUser()

    const { nickName, avatar } = userInfo
    myUser.set('nickName', nickName)
    myUser.set('avatar', avatar)

    const user = await myUser.save()
    return user
}

能够看到咱们上面的内容主要改动有四处：

  • 从 request.params 取到对应的请求体数据 userInfo，这决定了咱们以后在小程序端调用 LeanCloud 云函数时，要使用 POST 的方式。

  • 接着咱们使用了 LeanCloud 的查询 SDK 操做

    • 首先经过 new AV.Query 新建一个对 MyUser Class 的查询请求。注意到这里的 AV 接口是 LeanCloud 暴露给咱们的默认接口，能够经过这个接口操做 LeanCloud 的各类资源。
    • 接着经过 equalTo 进行条件过滤，这里咱们查询 nickName 为 userInfo.nickName 的用户。
    • 经过 query.find() 来提交查询操做，注意到这里咱们使用了 await 关键字，那是由于默认包裹云函数提的是一个 async 函数，容许咱们方便的执行异步流程。
  • 接着咱们对查询到的数据进行判断，若是 users.length > 0 表示存在用户，那么咱们返回查询到的第一个用户；若是不存在，咱们执行建立用户操做，再返回建立的用户。

  • 建立用户的操做主要是以下几个步骤：

    • AV.Object.extend 对应的 Class 来获取对应的类
    • 实例化这个类获取一个对象
    • 设置这个对象的属性，这里经过 set(key, value) 的方式设置
    • 经过对象的 save 方法进行保存，保存到 LeanCloud 数据库
注意

这里咱们只用到了 LeanCloud 的一些简单操做，具体的详情能够查看官方文档，官方文档撰写了很是完备的操做指南：点我查看。

部署

按照上面的步骤编写完 login 云函数以后，点击保存，此时咱们的云函数就编写好了，可是咱们目前在小程序端还没法调用它，由于咱们还须要一个部署的操做。

在 LeanCloud 上面进行云函数的部署也一样简单，只须要点击一个按钮：

点我以后，等待部署提示，过一会应该就会提示部署成功，这个时候咱们就能够在小程序端经过 REST API 访问了。

在小程序端进行调试

咱们这里使用 LeanCloud 主要是让支付宝小程序也能够成为全栈应用，对应咱们以前提到的 H5，由于 Taro 目前对 H5 的支持还不完善，咱们决定放弃对 H5 的讲解, 可是这并不表明 Taro 存在缺陷，只能说它是一个颇有潜力的框架，成长还须要实践，而且跨端小程序是它诞生的重点，将精力放在主要的路径上是值得提倡的，Taro 在近期发布了 Taro Next，支持使用 Vue/React/Nerve 开发跨端小程序，笔者这里推荐读者能够尝试一波：点我跳转。

由于咱们首先建立了 login 的云函数，因此咱们须要改进一下咱们的支付宝登陆的按钮逻辑，打开 src/components/AlipayLoginButton/index.js 对其中的内容做出以下的修改:

import { useDispatch } from '@tarojs/redux'

import './index.scss'
import { LOGIN } from '../../constants'

export default function AlipayLoginButton(props) {
  const [isLogin, setIsLogin] = useState(false)...      userInfo = JSON.parse(userInfo.response).response
      const { avatar, nickName } = userInfo

      dispatch({
        type: LOGIN,
        payload: {
          userInfo: {
            avatar,
            nickName,
          },
        },
      })
    } catch (err) {

能够看到，上面的内容改动主要有三处：

  • 咱们删掉了使用支付宝获取登陆信息以后存缓存的逻辑
  • 接着，咱们 dispatch 了一个 action.type 为 LOGIN 的异步 ACTION，并传递了 userInfo 数据
  • 最后咱们导入了须要的 LOGIN 常量。

除了支付宝登陆按钮的逻辑改进以外，咱们还要改进咱们的 api 逻辑，加上对支付宝环境的判断和调用对应的 LeanCloud 云函数。

打开 src/api/user.js 文件，对其中的内容做出对应的修改以下：

import Taro from '@tarojs/taro'

import { HEADER, LOGIN_URL, convertUserFormat } from './utils'

async function login(userInfo) {
  const isWeapp = Taro.getEnv() === Taro.ENV_TYPE.WEAPP
  const isAlipay = Taro.getEnv() === Taro.ENV_TYPE.ALIPAY
  const isH5 = Taro.getEnv() === Taro.ENV_TYPE.WEB

  // 针对微信小程序使用小程序云函数，其余使用小程序 RESTful API
  try {...      })

      return result.user
    } else if (isAlipay || isH5) {
      const { data } = await Taro.request({
        url: LOGIN_URL,
        method: 'POST',
        header: { ...HEADER },
        data: {
          userInfo,
        },
      })

      return convertUserFormat(data.result)
    }
  } catch (err) {
    console.error('login ERR: ', err)

能够看到上面主要作了四处修改：

  • 首先咱们导入了以前定义的和 LeanCloud 有个的 utils 函数。
  • 接着咱们加入了对 H5 环境的判断。
  • 最后咱们增长了一个 else if 流程，用于判断在支付宝小程序或者 H5 环境下须要执行发起 REST 请求的逻辑，这里咱们使用了 Taro.request 进行网络请求，并传入了对应的 url 、header、data，以及将请求的类型设置为 POST，以前咱们提到过，对 LeanCloud 云函数发起请求都须要使用 POST 方法。
  • 最后咱们将从 LeanCloud 拿到的请求结果使用 convertUserFormat 作了一次格式的转换，以适应现有的微信小程序数据类型。

好了，经过以上三步流程，咱们就跑通了小程序类请求 LeanCloud 的流程，保存修改的代码，让咱们立刻打开支付宝小程序试一下吧！

建立 Post 逻辑云函数

在上一节中，咱们建立了 User 逻辑的 login 云函数，在这一节中，咱们来收尾 Post 逻辑的三个云函数：

  • createPost
  • getPosts
  • getPost

由于建立的逻辑和方式和以前的 login 云函数相似，咱们这里再也不赘述，会简单的贴一下代码，但咱们一样按照以前的三步流程来说解。

建立云函数

首先建立咱们的 createPost 云函数，其代码以下：

const { postData, userId } = request.params


const Post = AV.Object.extend('Post')
const post = new Post();

const myUser = AV.Object.createWithoutData('MyUser', userId)
const newPost = await post.save({
    ...postData,
    user: myUser
});

const query = new AV.Query('Post')
const postWithUser = await query.equalTo('objectId', newPost.get('objectId')).include('user').first()

return postWithUser

接着来建立咱们的获取帖子列表的云函数 getPosts，其代码以下：

const query = new AV.Query('Post')
const posts = await query.include('user').find()

return posts

最后是咱们的获取帖子详情的云函数 getPost：

const { postId } = request.params

const query = new AV.Query('Post')
const post = await query.equalTo('objectId', postId).include('user').first()

return post

部署

好的，三个和 Post 逻辑有关的云函数建立好了，咱们立刻点击部署按钮来将它们部署上线。

在小程序端测试

当建立好云函数，并部署好以后，咱们就能够在小程序端编写对应的代码进行测试了，打开 src/api/post.js 文件，对其中的代码作出对应的修改以下：

import Taro from '@tarojs/taro'

import {
  HEADER,
  CREATE_POST_URL,
  GET_POSTS_URL,
  GET_POST_URL,
  convertPostFormat,
  convertPostsFormat,
} from './utils'

async function createPost(postData, userId) {
  const isWeapp = Taro.getEnv() === Taro.ENV_TYPE.WEAPP
  const isAlipay = Taro.getEnv() === Taro.ENV_TYPE.ALIPAY
  const isH5 = Taro.getEnv() === Taro.ENV_TYPE.WEB

  // 针对微信小程序使用小程序云函数，其余使用小程序 RESTful API
  try {...      })

      return result.post
    } else if (isAlipay || isH5) {
      const { data } = await Taro.request({
        url: CREATE_POST_URL,
        method: 'POST',
        header: { ...HEADER },
        data: {
          postData,
          userId,
        },
      })

      return convertPostFormat(data.result)
    }
  } catch (err) {
    console.error('createPost ERR: ', err)...async function getPosts() {
  const isWeapp = Taro.getEnv() === Taro.ENV_TYPE.WEAPP
  const isAlipay = Taro.getEnv() === Taro.ENV_TYPE.ALIPAY
  const isH5 = Taro.getEnv() === Taro.ENV_TYPE.WEB

  // 针对微信小程序使用小程序云函数，其余使用小程序 RESTful API
  try {...      })

      return result.posts
    } else if (isAlipay || isH5) {
      const { data } = await Taro.request({
        url: GET_POSTS_URL,
        method: 'POST',
        header: { ...HEADER },
      })

      return convertPostsFormat(data.result)
    }
  } catch (err) {
    console.error('getPosts ERR: ', err)...async function getPost(postId) {
  const isWeapp = Taro.getEnv() === Taro.ENV_TYPE.WEAPP
  const isAlipay = Taro.getEnv() === Taro.ENV_TYPE.ALIPAY
  const isH5 = Taro.getEnv() === Taro.ENV_TYPE.WEB

  // 针对微信小程序使用小程序云函数，其余使用小程序 RESTful API
  try {...      })

      return result.post
    } else if (isAlipay || isH5) {
      const { data } = await Taro.request({
        url: GET_POST_URL,
        method: 'POST',
        header: { ...HEADER },
        data: {
          postId,
        },
      })

      return convertPostFormat(data.result)
    }
  } catch (err) {
    console.error('getPost ERR: ', err)

能够看到上面主要作了四处修改：

  • 首先咱们导入了以前定义的和 LeanCloud 有关的 utils 函数。
  • 接着咱们加入了对 H5 环境的判断。
  • 最后咱们增长了一个 else if 流程，用于判断在支付宝小程序或者 H5 环境下须要执行发起 REST 请求的逻辑，这里咱们使用了 Taro.request 进行网络请求，并传入了对应三个和 Post 逻辑有关的 url 、以及对应的 header、data，以及将请求的类型设置为 POST，以前咱们提到过，对 LeanCloud 云函数发起请求都须要使用 POST 方法。
  • 最后咱们将从 LeanCloud 拿到的请求结果使用 convertPostFormat 作了一次格式的转换，以适应现有的微信小程序数据类型。

好了，经过以上三步流程，咱们就跑通了小程序类请求 LeanCloud 的流程，保存修改的代码，让咱们立刻打开支付宝小程序试一下吧！

小结

在这篇文章中，咱们讲解了支付宝小程序接入 LeanCloud Serverless 云服务的过程，咱们再来复习一下整个流程：

  • 首先咱们讲解了微信小程序云的不足，而后引出了 LeanCloud 来实现跨端小程序开发
  • 接着咱们介绍了 LeanCloud 服务的配置过程，具体包含 1）注册登陆 LeanCloud 2）配置对应的小程序后台的白名单。且由于 LeanCloud 没有支付宝小程序的 SDK，因此咱们采用 REST 请求的方式来获取和修改对应的数据
  • 接着咱们讲解了如何在 LeanCloud 上面建立数据表。
  • 接着，咱们介绍了如何在 LeanCloud 建立云函数。
  • 最后咱们经过三步走流程：1）建立云函数 2）部署 3）在小程序端测试，建立了咱们须要的四个云函数。

咱们再来看一下总体的接入效果：

到这里咱们的 Taro 多端小程序开发大型实战 就基本告一段落了，整个教程内容想当长，涵盖的内容也至关多，这也是图雀社区最长的一个系列教程。最后但愿 Taro 社区愈来愈好，也但愿能帮到您！

One More Thing

咱们在以前的教程中花了8篇文章的篇幅讲解了小程序从0到开发完成的过程，可是咱们还没将如何将小程序上线，这里咱们再额外花一点笔墨讲一下如何上线你的小程序，由于小程序的上线很容易，因此内容不会很长，有兴趣的读者能够继续读下去ღ( ´･ᴗ･` )比心。

微信小程序上线

首先点击小程序开发者工具的右上角的上传按钮：

接着去微信小程序网站后台：点我前往。

进行登陆以后，在进来的第一个页面的第二步能够看见版本发布的信息，安装微信官方的流程进行便可。

支付宝小程序上线

首先点击支付宝小程序开发者工具的右上角上传按钮：

接着去支付宝小程序后台：点我前往。

进行登陆以后，点击顶部的 开发中心，选择小程序应用，选择你的小程序应用，而后一样能够看到相似发布上线的栏目，安装支付宝官方的流程进行发布就能够了。

提示

微信/支付宝小程序对于有社交、社区性质的小程序是须要企业认证的，因此有相似需求的须要作一下准备。

好了，到这里咱们的要说再见了 👋！但愿大家学得开心！

想要学习更多精彩的实战技术教程？来 图雀社区逛逛吧。

本文所涉及的源代码都放在了 Github 上，若是您以为咱们写得还不错，但愿您能给❤️这篇文章点赞+Github仓库加星❤️哦

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程