微信小程式雲開發如何上手

2020 年 12 月 12 日
筆記
Backend, Taro, 雲開發, 小程式

簡要介紹

微信小程式雲開發，是基於 Serverless 的一站式後端雲服務，涵蓋函數、資料庫、存儲、CDN等服務，免後端運維。基於雲開發可以免鑒權調用微信所有開放能力。

前提準備

微信開發者工具

創建環境

打開小程式項目，點擊工具欄「雲開發」進行開通：

根據對話框提示，創建雲環境：

選擇默認免費配額：

「提交訂單」，創建完成。

此後，就可以打開「雲開發控制台」了：

創建雲函數

雲函數是一段運行在雲端的程式碼，無需管理伺服器，在開發工具內編寫、一鍵上傳部署即可運行後端程式碼。

首先，配置小程式項目。編輯 project.config.json 添加 cloudfunctionRoot:

{
  // ...
  "cloudfunctionRoot": "./cloudfunction/",
  "cloudfunctionTemplateRoot": "cloudfunctionTemplate"
}

並於根目錄新建該目錄 cloudfunction ，該目錄圖標會變成「雲目錄圖標」。

然後，右鍵雲函數根目錄，「新建 Node.js 雲函數」：

輸入雲函數名稱，就會創建好模板：

使用雲函數

編輯 index.js 修改成求和：

// 雲函數入口文件
const cloud = require("wx-server-sdk");

cloud.init();

// 雲函數入口函數
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext();

  return {
    sum: event.a + event.b,
  };
};

event 是觸發雲函數的事件。小程式端調用時，就是其請求參數。
return 返回雲函數計算的結果。小程式端調用時，就是其響應內容。

Taro 調用雲函數

Taro 是一個開放式跨端跨框架解決方案，支援使用 React/Vue/Nerv 等框架來開發微信/京東/百度/支付寶/字節跳動/QQ 小程式/H5 等應用。

快速創建小程式應用，可見 Taro3 快速開始。

Taro 使用雲開發，首先需要初始化雲環境：

import Taro from "@tarojs/taro";

Taro.cloud.init({
  env: "gocoding-xxx",
});

其中 env 環境 ID ，可見「雲開發控制台」的「設置」：

然後，調用該雲函數：

Taro.cloud
  .callFunction({
    name: "photo-lucky",
    data: {
      a: 1,
      b: 2,
    },
  })
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

name 是雲函數的名稱。
data 是請求參數，對應雲函數的 event。

部署雲函數

右鍵雲函數目錄，選擇「上傳並部署」：

編譯運行小程式，可見列印結果：

調試雲函數

打開「雲開發控制台」的「雲函數」：

打開「本地調試」，右側選中「開啟本地調試」：

之後，小程式調用雲函數就會進「本地調試」。

雲開發服務

雲函數模板中默認 require 了 wx-server-sdk，這是一個幫助我們在雲函數中操作資料庫、存儲以及調用其他雲函數的微信提供的庫。關於 wx-server-sdk 的使用可見在雲函數中使用 wx-server-sdk 。

其他

雲函數是 Node.js 應用，原想直接使用 TypeScript 開發並運行，可參考：

Node.js QuickStart: //basarat.gitbook.io/typescript/nodejs

但其調試時默認主入口是 index.js，試了下配置，但沒什麼用。報錯如下：

所以，想用 TypeScript 的話，需要 tsc 編譯發布出 js 後再調試。

參考

結語

歡迎關注 GoCoding 公眾號，分享日常 Coding 中實用的小技巧、小知識！

Tags: Backend Taro 雲開發小程式