基於小程式雲Serverless開發微信小程式

本文主要以使用小程式雲Serverless服務開發一個記事本微信小程式為例介紹如何使用小程式雲Serverless開發微信小程式。記事本小程式的開發涉及到雲函數調用、雲資料庫存儲、圖片存儲等功能，較好地展示了小程式雲Serverless服務在實際研發場景中如何幫助開發者提升研發效率。

一、準備工作

在開始前，確保已經完成以下準備工作：
1、註冊微信開放平台帳號，並創建微信小程式，獲得微信小程式AppID；
2、下載並安裝微信開發者工具；
3、已安裝 nodejs 開發環境。

二、操作步驟

2.1、步驟一開通小程式雲服務

阿里雲帳號首次使用小程式雲服務時，需要開通小程式雲服務：
1、登錄小程式雲控制台。
2、在產品開通頁面，勾選服務協議並單擊立即開通。

2.2、步驟二創建服務空間

開發小程式用到的小程式雲Serverless相關資源，如雲函數、資料庫、文件存儲，都以服務空間的維度進行管理。每個服務空間都有一個全局唯一的Space ID，小程式在使用雲資源時，通過這個Space ID關聯到具體的雲資源。
我們通過以下步驟創建服務空間並獲得相關配置：
1、登錄小程式雲控制台。
2、在左側導航欄選擇小程式Serverless > 服務空間管理。
3、單擊創建服務空間，填寫服務空間名稱和描述，單擊確定。
4、創建成功後，單擊服務空間右側的詳情可查看Space ID、Secret和API Endpoint、文件上傳Endpoint等資訊，並將這些資訊保存下來待用。

2.3、步驟三創建微信小程式並配置域名白名單

微信會對小程式需要通過網路訪問的服務提供方進行白名單限制，我們還需要配置小程式伺服器域名白名單：
1、登錄微信小程式公眾號平台。
2、在左側導航欄選擇開發，單擊開發設置頁簽。

3、在伺服器域名區域，單擊修改，根據提示重新掃碼進行身份認證。
4、根據步驟二中保存的服務空間資訊配置request合法域名（api.bspapp.com）和 uploadFile合法域名，確認無誤後保存並保存。

配置說明：
request合法域名：API Endpoint。
uploadFile合法域名：//文件上傳Endpoint。

2.4、步驟四在小程式雲控制台添加微信小程式憑證

我們還需要在小程式雲控制台添加微信小程式憑證：
1、在小程式雲控制台的左側導航欄，選擇小程式Serverless > 設置。
2、選擇微信頁簽，單擊添加密鑰，輸入AppID和App Secret，單擊確定。（微信小程式AppID和App Secret獲取方式請參考鏈接，請妥善保存小程式的App Secret）

2.5、步驟五初始化小程式工程

1、創建小程式工程

在微信開發者工具中創建新項目，填寫 AppID，並勾選「不使用雲服務」。

2、IDE配置

在微信小程式IDE的右上角，單擊詳情，勾選增強編譯。

在 1.02.1904282 以及之後版本的微信開發者工具中，增加了增強編譯的選項來增強ES6轉ES5的能力，啟用後會使用新的編譯邏輯以及提供額外的選項供開發者使用。

3、引入小程式雲Serverless客戶端SDK

在使用小程式雲Serverless服務前，我們需要在小程式中安裝小程式雲Serverless客戶端SDK並初始化。小程式Serverless客戶端SDK的更多資訊請參見安裝客戶端SDK2.3版本。
對於微信小程式端，我們需要直接引入SDK源文件。將下載後得到的 mpserverless.js 保存在此項目文件的文件夾中，建議單獨保存。如本項目中存儲路徑: /sdk/mpserverless.js 。

4、進行SDK初始化

打開工程根目錄的 app.js 文件，在構造App對象之前，添加如下程式碼：

const MPServerless = require('/sdk/mpserverless.js');   // 此路徑即為上述引入mpserverless.js文件的保存路徑
const mpServerless = new MPServerless({
  uploadFile: wx.uploadFile,
  request: wx.request,
  getAuthCode: wx.login,
  getFileInfo: wx.getFileInfo,
  getImageInfo: wx.getImageInfo,
}, {
  appId: '', // 小程式應用標識
  spaceId: '', // 服務空間標識
  clientSecret: '', // 服務空間 secret key
  endpoint: '', // 服務空間地址，從小程式 serverless 控制台處獲得
});

並根據我們之前得到的 appId、spaceId、clientSecret、endpoint 參數填充單引號里的內容。

然後，我們通過如下方式進行登錄授權並獲得用戶身份資訊：

const { mpServerless } = getApp();
await mpServerless.user.authorize({
  authProvider: 'wechat_openapi',
});

const getUserInfoRes = await mpServerless.user.getInfo();
if (getUserInfoRes.success) {
  // 獲得用戶
  const userInfo = getUserInfoRes.result.user;
}

獲取到的 userInfo 中有 userId 欄位，可以唯一標識用戶身份。

2.6、步驟六服務空間配置

在初始化小程式雲Serverless完成後，我們就可以在小程式中使用Serverless相關服務了。我們先登錄小程式雲Serverless控制台，進行資料庫、雲存儲、雲函數的配置。

1、創建數據表並配置許可權

小程式Serverless服務使用的是分散式文件存儲資料庫MongoDB，以JSON格式存儲數據。一個資料庫中可以包含多個數據表，我們存儲數據之前需要創建相應數據表。

在小程式雲控制台的左側導航欄，選擇小程式Serverless > 雲資料庫。
單擊新建數據表按鈕 + ，輸入數據表名稱（以myNoteBook為例）後單擊確認。
新建資料庫「myNoteBook」後，單擊設置資料庫許可權按鈕進入修改資料庫許可權介面，將write許可權修改為true。

2、配置雲存儲訪問許可權

本例中記事本功能涉及圖片的上傳，所以我們需要配置雲存儲的訪問許可權：

在小程式雲控制台的左側導航欄，選擇小程式Serverless > 雲存儲。
單擊選擇許可權頁簽進入許可權設置，並設置雲存儲的讀寫許可權。此時默認許可權為數據創建者可寫。

3、創建雲函數並上傳

雲函數（FaaS）是一段運行在雲端的、輕量的、無關聯的、並且可重用的程式碼。無需管理伺服器，只需編寫和上傳程式碼，即可獲得對應的數據結果。使用雲函數可以使企業和開發者不需要擔心伺服器或底層運維設施，也可以使程式碼進一步解耦，增加其重用性。在小程式端只需引入小程式雲Serverless的SDK，在應用的上下文中進行簡單配置，即可調用雲函數。

在調用之前，我們需要編寫並上傳雲函數。

在本例中，我們會創建一個名為 publish 的雲函數，它的邏輯是傳入一個記事條目，把這個記事條目存儲到雲資料庫中。

登錄小程式雲控制台，在對應的服務空間下，新建雲函數。添加成功後可以在控制台查看雲函數的名稱、備註等資訊。
我們在本地開發js程式碼，實現上述邏輯，保存為一個簡單的 index.js 文件，如：

'use strict';

module.exports = async function (ctx) {
  return await ctx.mpserverless.db.collection('myNoteBook').insertOne({
    "title": ctx.args.title,
    "txt": ctx.args.txt,
    "pic": ctx.args.pic,
    "date": ctx.args.date,
    "userId": ctx.args.userId,
  });
};

如上述，這個js文件實現了一個簡單的邏輯：傳入記事條目，然後存儲到雲資料庫中。

把index.js文件放在文件夾 publish 中，並將此文件夾壓縮成為 publish.zip 。
在小程式雲控制台的雲函數頁面，單擊雲函數 publish 名稱或左右管理進入當前隱函數的詳情頁面，單擊上傳js包上傳 publish.zip ，顯示上傳成功後單擊程式碼部署。

程式碼包上傳說明：
• 程式碼包的名稱必須和在控制台上創建的函數名稱一致。
• 程式碼包必須是.zip文件。
• 上傳的程式碼包必須包含index.js文件。

出現如下介面說明部署成功（注意右上角「部署成功」的提示）：

如果您需要更新雲函數，只需要點擊「更新js包」按鈕並上傳新的 publish.zip 文件即可。

說明：只修改本地的文件是不能修改雲函數內容的。每一次試圖修改雲函數，都需要重新製作壓縮包並在後台雲函數點擊「更新js包」。

2.7、步驟七小程式開發

1、首頁獲取記事列表數據

我們可以調用小程式雲Serverless SDK的資料庫介面獲取數據：

const app = getApp();
const { mpServerless } = app;
const noteBookCollection = mpServerless.db.collection('myNoteBook');
const PAGE_SIZE = 5;

Page({
  ...
  fetchPageData: async function () {
    noteBookCollection.find({
      "userId": app.globalData.userId,  // 假設我們已經取得userId並保存在globalData中
    }, {
      sort: {
        date: -1,
      },
      skip: (this.data.pageNum < 0) ? 0 : PAGE_SIZE * this.data.pageNum,
      limit: PAGE_SIZE,
    })
    .then((res) => {
      if (res.success) {
        // 更新列表
        this.setData({
          datalist: this.data.datalist.concat(res.result),
        });
      } else {
        // 失敗提示
      }
    });
  },
  ...
})

2、新增記事條目

新增一個記事條目時，只需調用我們已經在上述中創建的雲函數：

var util = require('../../utils/util.js');
const app = getApp();
const { mpServerless } = app;

Page({
  publishNote: async function() {
    mpServerless.function.invoke('publish', {
      "date": util.formatTime(new Date()), // 獲取時間資訊
      "userId": app.globalData.userId, // 小程式用於userId
      "title": // 標題
      "txt": // 內容
      "pic": // 上傳獲得的圖片地址
    })
    .then((res) => {
      if (res.success) {
        // 上傳成功
      } else {
        // 失敗提示
      }
    });
  }
})

在本小程式中，還可以為一次記事附加一張圖片。我們先上傳圖片，然後把上傳後獲得的鏈接附帶在記事條目中即可。上傳邏輯參考：

var util = require('../../utils/util.js');
const app = getApp();
const { mpServerless } = app;

Page({
  ...
  uploadImg: function () {        
    wx.chooseImage({
      success: ((res) => {
        const path = res.tempFilePaths[0];
        const options = {
          filePath: path,
          headers: {
            contentDisposition: 'inline',
          },
        };

        mpServerless.file.uploadFile(options).then((image) => {
             // 獲得圖片路徑
        });
      })
    });
  },
  ...
})

3、獲取記事詳情

在首頁點擊對應記事本條目時，將跳轉到記事詳情頁。我們需要在頁面跳轉時傳入對應記事的_id。

// pages/index/index.wxml

……
  <navigator url="/pages/detail/detail?dataId={{datalist[index]._id}}" class="txt">
    ……
  </navigator>
……

利用傳入的id資訊，在detail頁面就可以進行對應的資訊拉取：

// pages/detail/detail.js
var util = require('../../utils/util.js');
const app = getApp();
const noteBookCollection = app.mpServerless.db.collection('myNoteBook');

Page({
    onLoad: function (options) {
    noteBookCollection.find({
      _id: options.dataId,
    })
    .then((res) => {
      if (res.success) {
        this.setData({
          id: options.dataId,
          txt: res.result[0].txt,
          pic: res.result[0].pic,
          date: res.result[0].date,
          title: res.result[0].title,
        });
      } else {
        // 失敗提示
      }
    });
  },
})

4、刪除記事條目

在首頁瀏覽時，可以點擊刪除按鈕直接刪除記事條目。刪除時調用程式碼如下：

// pages/index/index.js
const app = getApp();
const noteBookCollection = app.mpServerless.db.collection('myNoteBook');

Page({
  ...
    delete(event) {
    const deleteAction = () => {
      const id = this.data.datalist[event.currentTarget.id]._id;
      noteBookCollection.deleteOne({
        _id: id,
      })
      .then((res) => {
        if (res.success) {
          wx.showToast({
            title: '刪除成功',
          });
          // 刷新頁面
        }
      });
    }

    wx.showModal({
      title: '提示',
      content: '請問確認要刪除嗎？',
      success: ((res) => {
        if (res.confirm) {
          deleteAction();
        }
      })
    })
  },
})

三、成果展示

小程式頁面展示：

四、總結

至此，我們已經基於小程式雲Serverless提供的雲函數、雲資料庫、雲存儲等BaaS能力，快速實現了一個記事本微信小程式的開發。在這個過程中我們體會到，使用小程式雲Serverless之後，我們通過API方式即可方便地獲取雲函數、數據存儲、文件存儲、音影片、影像處理等服務，不需要關心伺服器或底層運維設施，可以更專註於程式碼和業務本身，大幅提升研發效率。

釘釘搜索35248489，加入阿里云云原生應用研發平台EMAS技術交流群，探討最新最熱門的應用研發技術和實踐。（或釘釘掃碼加入）