一、生成小程序码
方案一(服务端接口,生成小程序码)
1.服务端 👉 调用 👉微信服务端 👉 获取接口凭证 auth.getAccessToken
入参 | 参考值 | 说明 |
---|---|---|
grant_type | client_credential | 填写 client_credential |
appid | wx1187xxxxxxxxxe0cb | 小程序唯一凭证,即 AppID |
secret | a55dbd5xxxxxxxxc96dd8991f59d | 小程序唯一凭证密钥,即 AppSecret |
2.服务端 👉 调用 👉 微信服务端 👉 获取小程序码 wxacode.getUnlimited
入参 | 参考值 | 说明 |
---|---|---|
access_token | 步骤1中,返回的接口凭证 | 接口调用凭证 |
scene | noteId=123&groupId=456&miniShopId=789 | 最大32个可见字符,只支持数字,大小写英文以及部分特殊字符:!#$&'()*+,/:;=?@-._~ ,其它字符请自行编码为合法字符(因不支持% ,中文无法使用 urlencode 处理,请使用其他编码方式) |
page | /packageLive/pages/live/live | 参考值必须是已经发布的小程序存在的页面(否则报错),例如 pages/index/index , 根路径前不要填加 / ,不能携带参数(参数请放在scene字段里),如果不填写这个字段,默认跳主页面 |
width | 入参430 | 参考值二维码的宽度,单位 px,最小 280px,最大 1280px |
auto_color | false | 自动配置线条颜色 |
line_color | {"r":0,"g":0,"b":0} | 线条颜色 |
is_hyaline | false | 是否需要透明底色 |
3.服务端 👉 返回 👉 客户端 👉小程序码URL
特别注意:
- 微信服务器返回的图片是 Buffer,需要服务端处理成 图片url。
4.小程序 👉 用户打开时解析 👉携带参数 👉跳转
特别注意:
- scene参数,由于使用限制最大32个可见字符,只支持数字,大小写英文以及部分特殊字符:!#$&’()*+,/:;=?@-._~,其它字符请自行编码为合法字符(因不支持%,中文无法使用 urlencode 处理,请使用其他编码方式)
- 传参规则调整为: 通过’,’分开(小程序端接收需保持一致)
参考文档:
草料参数小程序码生成器—开发者使用指南
微信官方文档—获取小程序码
微信官方文档—服务端API—生成小程序码—wxacode.getUnlimited
微信官方文档—服务端API—调用凭证—auth.getAccessToken
方案二(草料模板接口,生成小程序码)
1.进入草料小程序参数二维码生成器
2.通过草料后台配置模板
3. 通过Chrome抓取接口,获取模板id,跳转固定页面,携带固定参数(模板与页面一一对应)
4. 客户端 👉 调用 👉 草料服务端 👉 生成小程序码接口(非公开API,可能会失效,存在潜在不可控的风险)
5. 草料服务端 👉 返回 👉 客户端 👉 小程序码URL
6.小程序 👉 用户打开时解析 👉携带参数 👉跳转
7. 通过 PostMan 测试 https://cli.im/mina/generate_qrcode
接口可用性:
二、传递参数
客户端实现:(Weex代码,主要是网络请求,Native可以参考)
// 调用草料模板抓取的接口,通过param_value设置参数,进行传递,注意顺序
data() {
return {
retryCount: 3, // 请求重试次数
miniCodeImg: '', // 小程序码图片地址
noteId: 123, // 参数1
groupId: 456, // 参数2
shopId: 789, // 参数3
};
},
// 获取小程序码图片
getCaoLiaoMiniCode() {
const self = this;
const queryData = {
'tpl_id': '32890',
'code_type': 'wxcode',
'param_value[0]': self.noteId,
'param_value[1]': self.groupId,
'param_value[2]': self.shopId,
};
self.retryCount -= 1;
stream.fetch({
url: 'https://cli.im/mina/generate_qrcode',
body: self.stringifyParams(queryData),
method: 'POST',
type: 'json',
headers: {
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
},
}, (res) => {
if (res.ok) {
const response = res.data;
if (response.code === 1) {
self.miniCodeImg = response.data;
} else if (self.retryCount <= 0) {
shopModal.toast({ message: '小程序码生成失败,请重试' });
} else {
// 重试机制
self.getCaoLiaoMiniCode();
}
}
});
},
三、接收参数
小程序实现:
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
const self = this;
// 普通页面,参数接收
var noteId = options.noteId;
var groupId = options.groupId;
var miniShopId = app.globalData.miniShopId || 0;
// 小程序码,参数接收
if (options.scene) {
let scene = decodeURIComponent(options.scene);
// 以 ',' 连接参数的方式实现,(注意入参的顺序)
noteId = scene.split(",")[0] || 0;
groupId = scene.split(",")[1] || 0;
miniShopId = scene.split(",")[2] || 0;
}
self.setData({
noteId: noteId,
groupId: groupId,
shopId: miniShopId,
});
},