微信小程序云函数与自研框架的一次碰撞

前言

为了解决原生开发文件太多的痛点，本身搞了一套单文件解析框架，详情见 《介绍一个小程序预处理器》。在作这个框架的时候微信尚未推出云开发，因此设计之初也彻底没有考虑云开发相关的内容，此次记录下为了兼容云开发作的一些调整。

框架的关键问题

每次执行 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));
复制代码

若有疑问欢迎留言！