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

1,401 阅读1分钟

前言

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

框架的关键问题

每次执行 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));

如有疑问欢迎留言!