背景说明

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

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

云开发说明文档
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：找不到按钮的看下图标注部分

  微信开发编辑器界面

有问题留言交流

完...

原著是一个有趣的人,若有侵权,请通知删除