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

前言

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

框架的关键问题

每次执行 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. 部署云函数

如果该小程序还没有创建云开发环境，点击微信开发者工具左上角的云开发按钮进行创建。
在微信开发者工具自带的编辑器中右键 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));

如有疑问欢迎留言！

最后编辑于：2019.12.19 11:48:53