微信小程序雲函數與自研框架的一次碰撞

前言

爲了解決原生開發文件太多的痛點，本身搞了一套單文件解析框架，詳情見 《介紹一個小程序預處理器》。在作這個框架的時候微信尚未推出雲開發，因此設計之初也徹底沒有考慮雲開發相關的內容，此次記錄下爲了兼容雲開發作的一些調整。

框架的關鍵問題

每次執行 npm run dev 時，都會清空 dist 目錄下的全部文件，並將編譯文件從新填充到該目錄下。在雲開發推出以前，一切都顯得特別天然毫無毛病，可是雲開發推出以後，就暴露了一個特別關鍵的問題，由於雲開發的配置信息是須要填寫到 project.config.json 中的，而該文件也是在 dist 目錄下，也就意味着，每次執行編譯，該文件都會被刪除，雲開發的配置信息也會被刪除。

調整後的效果

先看療效，再看過程。先來看看調整完畢後，如何在代碼中執行雲函數。下面是一行獲取微信步數的代碼，僅需一行代碼，就能夠經過雲函數解密微信運動數據。

this.$cloud.getRunData().then(res => console.log(res));
複製代碼

具體調整過程

1. 配置雲函數

找到 dist 目錄下的 project.config.json，添加下面兩行配置

"miniprogramRoot": "miniprogram/", // 小程序根目錄
"cloudfunctionRoot": "miniprogram/cloudFunctions/", // 雲函數根目錄
複製代碼

2. 配置框架輸出目錄

框架的默認輸出目錄是 dist，可是是能夠經過配置調整的，在根目錄下新建 mpp.config.js，配置以下：

module.exports = {

  // 解析輸出目錄
  dist: 'dist/miniprogram',

  // 須要複製的文件拓展名
  needCopyExts: ['js', 'jpg', 'jpeg', 'png', 'svg', 'gif', 'json'],
};
複製代碼

3. 編寫雲函數

在src目錄下新建 cloudFunctions 文件夾，能夠在該目錄下編寫雲函數，這裏以 decodeData 爲例

• src/cloudFunctions/decodeData/index.js

const cloud = require('wx-server-sdk')

cloud.init()

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

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}
複製代碼

• src/cloudFunctions/decodeData/package.json

{
  "name": "decodeData",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "wx-server-sdk": "~1.6.0"
  }
}
複製代碼

4. 編譯項目

在根目錄下執行 npm run dev，並用微信開發者工具打開 dist 目錄

5. 部署雲函數

1. 若是該小程序尚未建立雲開發環境，點擊微信開發者工具左上角的雲開發按鈕進行建立。
2. 在微信開發者工具自帶的編輯器中右鍵 decodeData 文件夾，選擇 建立並部署：全部文件

6. 在項目中調用雲函數

在項目中 經過 wx.cloud.callFunction 能夠調用雲函數，這裏進行了簡單的封裝，封裝過程可參考《加強Page能力》

/*
 * 解密微信運動步數
 */
function getRunData() {
  return new Promise((resolve, reject) => {
    wx.getWeRunData({
      success: res => {
        wx.cloud.callFunction({
          name: 'decodeData',
          data: {
            weRunData: wx.cloud.CloudID(res.cloudID),
          }
        }).then(res => {
          resolve(res.result.event.weRunData.data.stepInfoList);
        }).catch(err => reject(err));
      },
    });
  })
}

module.exports = {
  getRunData,
}
複製代碼

7. 在業務邏輯中調用

在具體的業務場景中，僅需一行代碼就能夠獲取到微信運動步數。

this.$cloud.getRunData().then(res => console.log(res));
複製代碼

若有疑問歡迎留言！