①开通云开发、创建云开发环境(环境命名为项目名称拼音即可,示例中football)
创建了第一个云开发小程序后,在使用云开发能力之前需要先开通云开发。在开发者工具工具栏左侧,点击 “云开发” 按钮即可打开云控制台、根据提示开通云开发、创建云环境。默认配额下可以创建两个环境,各个环境相互隔离,每个环境都包含独立的数据库实例、存储空间、云函数配置等资源。每个环境都有唯一的环境 ID 标识,初始创建的环境自动成为默认环境。
注:AppID 首次开通云环境后,需等待大约 10 分钟方可正常使用云 API,在此期间官方后台服务正在做准备服务,如尝试在小程序中调用云
API 则会报 cloud init error:{ errMsg: “invalid scope” } 的错误。
②在项目根目录找到 project.config.json 文件,新增 cloudfunctionRoot 字段,指定本地已存在的目录作为云函数的本地根目录。
示例:functions 为云函数文件夹名称。
{ "cloudfunctionRoot": "./functions/"}
③完成指定之后,云函数的根目录的图标会变成 “云目录图标”,云函数根目录下的第一级目录(云函数目录)是与云函数名字相同的,如果对应的线上环境存在该云函数,则我们会用一个特殊的 “云图标” 标明。
其中football是云环境名称。
④接着,我们在云函数根目录上右键,在右键菜单中,可以选择创建一个新的 Node.js 云函数,我们将该云函数命名为 createCode。开发者工具在本地创建出云函数目录和入口 index.js 文件,同时在线上环境中创建出对应的云函数。创建成功后,工具会提示是否立即本地安装依赖,确定后工具会自动安装 wx-server-sdk。
⑤使用云函数调用小程序码时,必须要设置权限。在新建的云函数createCode文件夹右击选择新建js文件,添加config.js文件,在config.js文件添加小程序码的设置权限代码:
{ "permissions": { "openapi": [ "wxacode.getUnlimited" ] }}
下面是云调用小程序码的云函数的index.js相关代码,注意添加之后,右击云函数,点击 上传并部署云端安装依赖(不上传node_modules),重新上传云函数到云端,不然修改之后的云函数不生效。下面是云函数的index.js相关代码:
// 云调用~生成小程序二维码const cloud = require('wx-server-sdk')cloud.init()exports.main = async (event, context) => { var scene = event.scene; var page = event.page; var width = event.width; var lineColor = event.lineColor; var isHyaline = event.isHyaline; var autoColor = event.autoColor; try { // 1、通过云调用生成二维码 const result = await cloud.openapi.wxacode.getUnlimited({ scene: scene, page: page, width: width, lineColor: lineColor, isHyaline: isHyaline, autoColor: autoColor, }) 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 }}
⑥需要小程序码页面的js文件中进行调用,需要注意的是,采用getUnlimited生成的小程序码,永久有效,数量暂无限制,但是scene参数的长度受到了限制,最多只能32位。可以采用16进制进行优化参数的长度。调用云函数生成小程序码代码如下:
// 生成二维码let activityId = this.data.activityIdlet recommendAccountId = this.data.recommendAccountId;wx.cloud.init()let newActivity = parseInt(activityId).toString(16)let newRecommendAccountId = parseInt(recommendAccountId).toString(16)var path = 'pages/activity/activity-details/activity-details'var width = '430';var scene = 'p,' + newActivity + ',' + newRecommendAccountId;var lineColor = { "r": "255", "g": "255", "b": "255"};var isHyaline = false;var autoColor = false;let _this = this;wx.cloud.callFunction({ name: 'newCode', data: { page: path, width: width, scene: scene, lineColor: lineColor, isHyaline: isHyaline, autoColor: autoColor }, success: res => { console.log("生成成功") console.log(res) _this.setData({ code: res.result[0].tempFileURL }, () => { this.loadOrgDetail()}) }, fail: error => { console.log("生成失败") console.log(JSON.stringify(error)) }});
注意事项:云函数修改之后一定要右击云函数,点击 上传并部署云端安装依赖(不上传node_modules)重新上传云函数到云端。不然修改之后的云函数不生效。