Taro 小程序開發大型實戰（八）：嚐鮮 LeanCloud Serverless 雲服務

時間 2020-12-26

標籤 css html 前端 react git github 數據庫 redux 小程序 segmentfault 欄目雲服務简体版

原文原文鏈接

歡迎繼續閱讀《Taro 小程序開發大型實戰》系列，前情回顧：css

熟悉的 React，熟悉的 Hooks：咱們用 React 和 Hooks 實現了一個很是簡單的添加帖子的原型
多頁面跳轉和 Taro UI 組件庫：咱們用 Taro 自帶的路由功能實現了多頁面跳轉，並用 Taro UI 組件庫升級了應用界面
實現微信和支付寶多端登陸：實現了微信、支付寶以及普通登陸和退出登陸
使用 Hooks 版的 Redux 實現大型應用狀態管理（上篇）：使用 Hooks 版的 Redux 實現了 user 邏輯的狀態管理重構
使用 Hooks 版的 Redux 實現大型應用狀態管理（下篇）：使用 Hooks 版的 Redux 實現了 post 邏輯的狀態管理重構
Taro 小程序開發大型實戰（六）：嚐鮮微信小程序雲（上篇）： user 邏輯接入微信小程序雲
Taro 小程序開發大型實戰（七）：嚐鮮微信小程序雲（下篇）：post 邏輯接入微信小程序雲

在上兩篇文章中，咱們講解了使用微信小程序雲做爲咱們的小程序後臺，而後咱們跑通了咱們的註冊登陸、建立帖子、獲取帖子列表、獲取帖子詳情的全棧流程，若是隻想了解微信小程序的全棧開發流程的話，以前的文章已經足夠了，若是還想了解跨端開發全棧開發流程的話（固然用 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 社區愈來愈好，也但願能幫到您！