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

時間 2020-08-13

標籤基於程序 serverless 開發微信简体版

原文原文鏈接

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

1、準備工做

在開始前，確保已經完成如下準備工做：
一、註冊微信開放平臺帳號，並建立微信小程序，得到微信小程序AppID；
二、下載並安裝微信開發者工具；
三、已安裝 nodejs 開發環境。node

2、操做步驟

2.一、步驟一開通小程序雲服務

阿里雲帳號首次使用小程序雲服務時，須要開通小程序雲服務：
一、登陸小程序雲控制檯。
二、在產品開通頁面，勾選服務協議並單擊當即開通。
數據庫

2.二、步驟二建立服務空間

開發小程序用到的小程序雲Serverless相關資源，如雲函數、數據庫、文件存儲，都以服務空間的維度進行管理。每一個服務空間都有一個全局惟一的Space ID，小程序在使用雲資源時，經過這個Space ID關聯到具體的雲資源。
咱們經過如下步驟建立服務空間並得到相關配置：
一、登陸小程序雲控制檯。
二、在左側導航欄選擇小程序Serverless > 服務空間管理。
三、單擊建立服務空間，填寫服務空間名稱和描述，單擊肯定。
四、建立成功後，單擊服務空間右側的詳情可查看Space ID、Secret和API Endpoint、文件上傳Endpoint等信息，並將這些信息保存下來待用。
小程序

2.三、步驟三建立微信小程序並配置域名白名單

微信會對小程序須要經過網絡訪問的服務提供方進行白名單限制，咱們還須要配置小程序服務器域名白名單：
一、登陸微信小程序公衆號平臺。
二、在左側導航欄選擇開發，單擊開發設置頁籤。
微信小程序

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

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

2.四、步驟四在小程序雲控制檯添加微信小程序憑證

咱們還須要在小程序雲控制檯添加微信小程序憑證：
一、在小程序雲控制檯的左側導航欄，選擇小程序Serverless > 設置。
二、選擇微信頁籤，單擊添加密鑰，輸入AppID和App Secret，單擊肯定。（微信小程序AppID和App Secret獲取方式請參考連接，請妥善保存小程序的App Secret）

服務器

2.五、步驟五初始化小程序工程

一、建立小程序工程

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

二、IDE配置

在微信小程序IDE的右上角，單擊詳情，勾選加強編譯。
網絡

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

三、引入小程序雲Serverless客戶端SDK

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

四、進行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.六、步驟六服務空間配置

在初始化小程序雲Serverless完成後，咱們就能夠在小程序中使用Serverless相關服務了。咱們先登陸小程序雲Serverless控制檯，進行數據庫、雲存儲、雲函數的配置。

一、建立數據表並配置權限

小程序Serverless服務使用的是分佈式文件存儲數據庫MongoDB，以JSON格式存儲數據。一個數據庫中能夠包含多個數據表，咱們存儲數據以前須要建立相應數據表。

在小程序雲控制檯的左側導航欄，選擇小程序Serverless > 雲數據庫。
單擊新建數據表按鈕 + ，輸入數據表名稱（以myNoteBook爲例）後單擊確認。
新建數據庫「myNoteBook」後，單擊設置數據庫權限按鈕進入修改數據庫權限界面，將write權限修改成true。

二、配置雲存儲訪問權限

本例中記事本功能涉及圖片的上傳，因此咱們須要配置雲存儲的訪問權限：

在小程序雲控制檯的左側導航欄，選擇小程序Serverless > 雲存儲。
單擊選擇權限頁籤進入權限設置，並設置雲存儲的讀寫權限。此時默認權限爲數據建立者可寫。

三、建立雲函數並上傳

雲函數（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.七、步驟七小程序開發

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

咱們能夠調用小程序雲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 {
        // 失敗提示
      }
    });
  },
  ...
})

二、新增記事條目

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

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) => {
             // 得到圖片路徑
        });
      })
    });
  },
  ...
})

三、獲取記事詳情

在首頁點擊對應記事本條目時，將跳轉到記事詳情頁。咱們須要在頁面跳轉時傳入對應記事的_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 {
        // 失敗提示
      }
    });
  },
})

四、刪除記事條目

在首頁瀏覽時，能夠點擊刪除按鈕直接刪除記事條目。刪除時調用代碼以下：

// 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();
        }
      })
    })
  },
})

3、成果展現

小程序頁面展現：

4、總結

至此，咱們已經基於小程序雲Serverless提供的雲函數、雲數據庫、雲存儲等BaaS能力，快速實現了一個記事本微信小程序的開發。在這個過程當中咱們體會到，使用小程序雲Serverless以後，咱們經過API方式便可方便地獲取雲函數、數據存儲、文件存儲、音視頻、圖像處理等服務，不須要關心服務器或底層運維設施，能夠更專一於代碼和業務自己，大幅提高研發效率。

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