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

GoCodingInMyWay發表於2020-12-12
微信小程式

簡要介紹

微信小程式雲開發，是基於 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 開發並執行，可參考：

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

所以，想用 TypeScript 的話，需要 tsc 編譯釋出出 js 後再除錯。

參考

結語

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

相關文章