【微信小程序】云调用之生成带参数小程序码

背景说明

小程序开发中存在一种业务场景，即生成带二维码的分享图提供用户分享朋友圈，同时该二维码识别时能定位到固定页面~本文章即分享下通过微信提供的云开发做带参数二维码的开发过程[注：用的是生成无限制二维码的接口]

本文涉及的微信官方文档↓

云开发说明文档
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/init.html

不限制个数的带参数二维码接口
https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html#method-cloud

前期准备：

1.小程序开通云开发功能，新建项目时勾选云开发
2.微信开发编辑器点击头部云开发并开通

正文开始

使用云开发的项目目录结构

MyProject
├─cloudfunctions
│  └─openapi     //放置云调用的相关api封装 含 js/config.json/package.json
└─miniprogram
    ├─api
    ├─component
    │  ├─goBtn
    │  └─share   //使用云调用 生成二维码的组件
    ├─images
    ├─pages
    │  ├─detail
    │  ├─index
    │  ├─search
    │  └─xxxxx
    ├─template
    └─utils

代码详解

1.openapi/ config.json
配置权限

{
  "permissions": {
    "openapi": [
      "wxacode.getUnlimited"
    ]
  }
}

2.openapi/ index.js
配置了多个需要用到的api，此处只留和生成二维码相关代码，便于阅读
PS：上传至云存储，获取的临时地址有效期为一天

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({
  // API 调用都保持和云函数当前所在环境一致
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
  console.log(event)
  switch (event.action) {
    case 'getWXACodeUnlimit': {
      return getWXACodeUnlimit(event)
    }
    default: {
      return
    }
  }
}

async function getWXACodeUnlimit(event){
  var scene = event.scene;
  var page = event.page;
  var width = event.width;

  try {
    // 1、通过云调用生成二维码
    const result = await cloud.openapi.wxacode.getUnlimited({
      scene: scene,
      page: page,
      width: width
    })
    console.log(result)
    // 2、上传图片到云存储
    const upload = await cloud.uploadFile({
      cloudPath: scene + '.jpg',
      fileContent: result.buffer,
    })
    console.log(upload)
    // 3、返回图片地址
    var fileID = upload.fileID;
    console.log("fileId=" + fileID);

    const fileList = [fileID]
    const imgList = await cloud.getTempFileURL({
      fileList: fileList,
    })
    return imgList.fileList
  } catch (err) {
    console.log(err)
    return err
  }
}

3.openapi/ package.json

{
  "name": "openapi",
  "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.7.0"
  }
}

云调用函数已经写好了，接下去就是调用了
注：我是在share组件 绘制画布的时候使用
1.初始化云调用

wx.cloud.init({
  env: 'test-xxxxx'
})

2.调用函数

scene的长度不得超过32
page不能带参数

wx.cloud.callFunction({
          name: 'openapi',
          data: {
            action:'getWXACodeUnlimit',
            page: 'pages/detail/detail',
            width: 220,
            scene: id+"_"+gid,
          },
          success: res => {
            //生成成功
            console.log(res)
          },
          fail: error => {
            //生成失败
            console.log(JSON.stringify(error))
          }
        });

成功返回的参数result属性是一个list，取其第一个对象的tempFileURL即可

3.定位页面参数解析

onLoad: function (options) {  
    //解析参数 分 普通跳转和二维码识别  
    let id = 0
    let gid = 0
    if(options.scene && options.scene!=''){
      const scene = decodeURIComponent(options.scene)
      const ids = scene.split("_")
      id = ids[0] || 0
      gid = ids[1] || 0
    }else if(options.id && options.gid){
      id = options.id
      gid = options.goodsId
    }    
}

开发中可能遇到的问题

• 编译过程中如果出现wx-server-sdk不存在之类的异常，确认下是否正确引用sdk，require('wx-server-sdk')这个代码是在cloudfunctions目录的文件下使用而非小程序页面或组件

• 编译中出现找不带或不识别你写的方法异常，打开微信开发编辑器的云开发界面，点击云函数，看是否存在你写的。若无，则点击开发编辑器->编辑器(在顶部)->找到编辑器出来界面中，函数对应的文件，右击->找到部署编译的按钮，点击。操作完成后看下云开发界面的函数是否有了，再重新编译项目看下
  PS：找不到按钮的看下图标注部分

  
  微信开发编辑器界面

有问题留言交流

完...