背景
在小程序中,可以直接分享小程序到聊天窗口,但是无法分享小程序到朋友圈,但是朋友圈又是一个重要的推广场地,所以分享小程序码就成了重要途径。常常被朋友圈刷屏的各种带有小程序码的海报,就是一个应用场景。
普通的分享小程序码,直接在后台放一个通用的小程序码就可以了。但是如果需要分享一个特定路径+参数的小程序码就必须要借助小程序提供的API
来实现了。
此次来和大家说一说如何利用云函数来实现获取特定路径+参数
的小程序码。
接口
云函数为我们提供了三种获取小程序码的API
:
名称 | 功能说明 |
---|---|
wxacode.createQRCode | 获取小程序二维码,适用于需要的码数量较少的业务场景 |
wxacode.get | 获取小程序码,适用于需要的码数量较少的业务场景 |
wxacode.getUnlimited | 获取小程序码,适用于需要的码数量极多的业务场景 |
前两个都有数量限制,无法满足一些类似详情分享的场景,所以留给我们的道路只有wxacode.getUnlimited
接口了。
先来看一下这个接口的主要参数:
属性 | 说明 |
---|---|
scene | 最大32个可见字符,只支持数字,大小写英文以及部分特殊字符:!#$&'()*+,/:;=?@-._~,其它字符请自行编码为合法字符(因不支持%,中文无法使用 urlencode 处理,请使用其他编码方式) |
page | 必须是已经发布的小程序存在的页面(否则报错),例如 pages/index/index, 根路径前不要填加 /,不能携带参数(参数请放在scene字段里),如果不填写这个字段,默认跳主页面 |
其他参数就不一一列举了,有需要可以直接去官方文档查看。
根据上面的参数,我们可以指定任意page
,而且还可以传入页面参数,最终在小程序页面加载的时候,通过options
来获取到scene
,从而做数据加载。
实现
云函数
先来看一下云函数如何配置。
新建一个云函数qrcode
后,在config.json
中配置如下:
{
"permissions": {
"openapi": [
"wxacode.getUnlimited"
]
}
}
然后在index.js
中加入如下代码:
// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async(event, context) => {
try {
let param = {
// 小程序传入的 scene 参数
scene: event.scene,
// 可以换成任意 page
page: 'pages/index/index',
};
// 调用接口
var result = await cloud.openapi.wxacode.getUnlimited(param)
return result
} catch (err) {
return err
}
}
然后部署到云端,云函数部分就完成了。
小程序
再来看看小程序端如何调用:
requestQrcode(scene) {
let that = this;
wx.cloud.callFunction({
name: 'qrcode',
data: {
scene: scene
}
})
.then((res) => {
let path = wx.env.USER_DATA_PATH + '/' + res.requestID + '.jpg'
if (res.result.contentType == 'image/jpeg') {
// 返回的结束是 base64 编码的二进制流
// 这里直接保存到文件
wx.getFileSystemManager()
.writeFile({
filePath: path,
data: res.result.buffer,
encoding: 'base64',
success: (res) => {
},
fail: (res) => {
}
})
} else {
// 异常处理
}
})
},
最终在页面的onLoad(options)
中可以这样获取到小程序码传递的参数scene
:
onLoad: function(options) {
let scene = options.scene;
},
这样就完成了利用云函数来生成特定路径+参数
的小程序码了,后面就可以利用这个小程序码来绘制海报。
问题
不知道你是否注意到scene
参数有一个限制,最大32个可见字符
,有时候很容易就超出了,那岂不是就没法用了?
没有什么可以难倒程序员!如果有,那一定是需求不合理~
短链
,一个很好的方案。把所有的参数生成一个唯一的短链
,作为scene
参数传递,最后在加载的时候先解析短链
,就可以获取到超长参数啦~
小技巧
如果你不需要给页面传入参数,直接在小程序管理平台最上方,有个工具->生成小程序码
,填上页面路径就可以生成小程序码素材啦~