云开发·云调用生成小程序码
云开发·云调用生成小程序码
小程序云开发已经支持云调用，开放了很多接口，一直想要的获取小程序码也支持了。这下轻量的小程序也可以有自定义小程序码的功能。
1. 需求
获得一个带参数的小程序码，传播出去以后，用户扫码进入指定页面，根据参数做不同的处理。本文只讲小程序码生成、存储、展示部分。参数处理不多介绍，可以查看 项目代码 了解更多。
2. 开通云开发
新建小程序可以从开发工具的云开发模板初始化项目，根据云开发操作指引新建项目即可。
但是这里有个问题，已发布小程序的页面才能生成小程序码。如果现有的小程序没有开通云开发，需要做以下几步：
开发工具开通云开发，设定云开发的环境；
将原来的代码（除了[代码]project.config.json[代码]以外的所有文件）放到新建的 [代码]miniprogram[代码] 目录；
新增 [代码]cloudfunctions[代码] 目录；
[代码]app.json[代码] 新增配置 [代码]"cloud": true[代码]；
[代码]project.config.json[代码] 配置 [代码]"miniprogramRoot":"miniprogram/"[代码] 和 [代码]"cloudfunctionRoot":"cloudfunctions/"[代码]；
修改小程序基础库版本，最低要 2.3.0 [代码]"libVersion": "2.3.0"[代码]。
3. 生成小程序码
下面可以开始写代码开发了，开始之前，建议先看完官方教程。特别是开发工具的使用步骤，开发和调试时如果遇到奇怪的问题，可以尝试重启开发工具、重装开发工具，也可以去微信开放社区发帖。(重启和重装都是我在社区中发现的答案，能解决各种不应该存在的问题)。
3.1 准备文件
在 [代码]cloudfunctions[代码]目录右键新建Node.js云函数 [代码]getqr[代码]。
生成小程序码需要单独指定权限。在 [代码]getqr[代码] 目录新建 [代码]config.json[代码] ，里面写以下内容：
[代码]{
"permissions": {
"openapi": [
"wxacode.getUnlimited"
]
}
}
[代码]
小程序码的获取方式有三种，这里只用到了接口 getUnlimited，选择这个接口的原因是漂亮的圆形小程序码，数量无限制。具体区别可以去 获取小程序码官方文档查看详情。
正常情况下，这个时候云函数可以部署测试了。如果遇到部署不成功、各种权限问题，可以尝试本地部署上传所有文件、重启试试。
3.2 生成小程序码
生成小程序码的代码如下，可以指定页面和页面参数 [代码]scene[代码]，还有小程序码的尺寸。
注意这里的 [代码]scene[代码] 有限制:
最大32个可见字符；
只支持数字，大小写英文以及部分特殊字符：[代码]!#$&'()*+,/:;=?@-._~[代码]；
注意参数格式：下面实例代码生成小程序码后，扫码获得 [代码]pages/demo/demo?scene=id%3D6[代码] 。
[代码]try {
const result = await cloud.openapi.wxacode.getUnlimited({
page: 'pages/demo/demo',
scene: 'id=6',
width: 240,
})
console.log(result)
return result
} catch (err) {
console.log(err)
return err
}
[代码]
直接调用，比服务端调用少了 access_token 参数。
3.3 上传到云存储
返回值中的 buffer 就是图片内容，直接上传到云存储：
[代码]const uploadResult = await cloud.uploadFile({
cloudPath: 'shareqr/' + qr_name_hash + '.jpg',
fileContent: result.buffer,
});
[代码]
我在云存储新建了 [代码]shareqr[代码] 目录保存小程序码；
图片名根据参数取md5摘要；
[代码]getUnlimited[代码] 返回的图像是 [代码]jpeg[代码] 格式，后缀硬编码写 [代码].jpg[代码]。
3.4 获取图片临时路径
直接上代码
[代码]getURLReault = await cloud.getTempFileURL({
fileList: [uploadResult.fileID]
});
fileObj = getURLReault.fileList[0]
return fileObj
[代码]
3.5 直接从存云存储获取
生成过以后图片已经保存在云存储，用同样的参数第二次调用没必要再生成一次，去掉一次网络请求，可以节省不少时间。
前面说到文件名使用请求参数摘要，知道了目录和文件名，再加上文件bucket前缀就可以拼出来 [代码]fileID[代码]，用[代码]fileID[代码] 可以查询云存储的文件。
比如我刚刚生成的 fileID 是 [代码]cloud://dev-xxxx.8888-dev-xxxx/qr/44ea42f05091c3bec771123e6e8cd4c2.jpg[代码]， 前缀就是 [代码]cloud://dev-xxxx.8888-dev-xxxx/[代码]。再拼上目录、文件名、后缀就是 [代码]fileID[代码]。
注：此处的 [代码]fileID[代码]拼接方法并不是来自官方文档，只是在使用中发现这个前缀不会变。还需要官方解释说明[代码]fileID[代码]规则。
如果会改变，就需要再用云数据库存储[代码]fileID[代码]，更麻烦一些。
3.6 云函数完整代码
[代码]// 云函数入口文件
const cloud = require('wx-server-sdk');
const crypto = require('crypto');
const bucketPrefix = 'cloud://dev-xxxx.8888-idc-4d11a4-1257831628/qr/'; // env: 'dev-xxxx'
// 云函数入口函数
exports.main = async (event, context) => {
const full_path = event.page + '?' + event.scene;
const qr_name_hash = crypto.createHash('md5').update(full_path).digest('hex');
const temp_id = bucketPrefix + qr_name_hash + '.jpg';
// return {
// full_path,
// qr_name_hash,
// temp_id
// }
try {
// 先尝试获取文件，存在就直接返回临时路径
let getURLReault = await cloud.getTempFileURL({
fileList: [temp_id]
});
// return getURLReault;
let fileObj = getURLReault.fileList[0];
if (fileObj.tempFileURL != '') {
fileObj.fromCache = true;
return fileObj;
}
// 生成小程序码
const wxacodeResult = await cloud.openapi.wxacode.getUnlimited({
scene: event.scene,
page: event.page,
width: 280 //二维码的宽度，单位 px，最小 280px，最大 1280px
})
// return wxacodeResult;
if (wxacodeResult.errCode != 0) {
// 生成二维码失败，返回错误信息
return wxacodeResult;
}
// 上传到云存储
const uploadResult = await cloud.uploadFile({
cloudPath: 'qr/' + qr_name_hash + '.jpg',
fileContent: wxacodeResult.buffer,
});
// return uploadResult;
if (!uploadResult.fileID) {
//上传失败，返回错误信息
return uploadResult;
}
// 获取图片临时路径
getURLReault = await cloud.getTempFileURL({
fileList: [uploadResult.fileID]
});
fileObj = getURLReault.fileList[0];
fileObj.fromCache = false;
// 上传成功，获取文件临时url，返回临时路径的查询结果
return fileObj;
} catch (err) {
return err
}
}
[代码]
4. 小程序页面调用
调用页面就比较简单了，在小程序新建一个 [代码]pages/share/share[代码] 在 [代码]onLoad[代码] 函数调用云函数。
[代码]// 使用前记得先初始化云函数，一版放到 app.js onLaunch() 中
// wx.cloud.init({env: 'dev-8888'})
wx.cloud.callFunction({
name: 'getqr',
data: {
page: 'pages/demo/demo',
scene: 'id=6',
}
}).then(res => {
console.log(res.result);
if (res.result.status == 0) {
_this.setData({
qr_url: res.result.tempFileURL
})
}else{
wx.showToast({
icon: 'none',
title: '调用失败',
})
}
}).catch(err => {
console.error(err);
wx.showToast({
icon: 'none',
title: '调用失败',
})
})
[代码]
至此完整的调用过程已经全部完成，详细代码可以到 项目代码 查看。
代码中还对入口页面和share页面的参数做了包装，云函数可以直接使用，小程序可以稍做修改适应自己业务。
写在最后
小程序云开发已经开放了很多功能，除了这次提到的生成小程序码，云调用还可以发送模板消息。有需要的开发者又一个理由可以快速上线新功能了。
云开发还开放了[代码]HTTP API[代码]，也就是用自己的服务器调用云函数。以前看完云开发介绍文章最大的疑问就是，你说的都很好，可是后台数据怎么管理呢？不能跟自己的服务器结合，只能放一些轻量的小程序。有了 [代码]HTTP API[代码] 以后就可以用自己的服务器做管理后台了。这时候你要问，都用上服务器了，还需要云开发做什么。首先，云开发免费；其次，免费功能已经够强，就差不能做Web管理后台了；最后，获取access_token（小程序及小游戏调用不要求IP地址在白名单内。）
