注意:保证当前小程序要有线上版本
这种方式要利用一个插件(https://github.com/adventurewithme/chajian里面的qrcode.js)。
要转换的这个url必须要在微信公众平台配置了扫普通链接二维码打开小程序,如下图:
测试连接是开发人员测试用的,跳转至测试版本的小程序,如果,转换的url不是测试连接,那么就会跳转到线上版本的小程序。并且有一个缺点,只能跳转到下图配置的小程序功能页面。
wxml部分:
在js部分要先引入插件:var QR = require("../../utils/qrcode.js");
var QR = require("../../utils/qrcode.js");
Page({
data:{
imagePath:'',
placeholder: 'https://www.baidu.com?name=test123'//这里的连接换成自己的,并且已经在微信公众平台配置扫普通链接二维码打开小程序
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
var size = this.setCanvasSize();//动态设置画布大小
var initUrl = this.data.placeholder;
this.createQrCode(initUrl, "mycanvas", size.w, size.h);
},
//适配不同屏幕大小的canvas
setCanvasSize:function(){
var size={};
try {
var res = wx.getSystemInfoSync();
var scale = 750/686;//不同屏幕下canvas的适配比例;设计稿是750宽
var width = res.windowWidth/scale;
var height = width;//canvas画布为正方形
size.w = width;
size.h = height;
} catch (e) {
// Do something when catch error
console.log("获取设备信息失败"+e);
}
return size;
} ,
createQrCode:function(url,canvasId,cavW,cavH){
//调用插件中的draw方法,绘制二维码图片
QR.api.draw(url,canvasId,cavW,cavH);
setTimeout(() => { this.canvasToTempImage();},1000);
},
//获取临时缓存照片路径,存入data中
canvasToTempImage:function(){
var that = this;
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
console.log(tempFilePath);
that.setData({
imagePath:tempFilePath,
// canvasHidden:true
});
},
fail: function (res) {
console.log(res);
}
});
},
})
这样页面上就生成了一个普通二维码。
当placeholder与测试连接相同的时候,扫这个二维码就跳转至测试版本的小程序,placeholder与测试连接不同,则跳转至线上版本的小程序。
获取这个placeholder后拼接的参数的方式是:在打开的这个页面的onLoad函数里面获取options。
即:
上面这张图是小编的url只拼接了一个参数id,如果拼接了多个参数,需要按照情况处理。
如此就得到了url中的id。
参考文档:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/qr-code/wxacode.getUnlimited.html
注意:这种方式是一直会跳转到线上版本的小程序。
小编全程通过前端请求,所以要将微信开发者工具调为不校验合法域名。
getaccess(){
var that=this;
wx.request({
url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential',
data: {
appid: '你的appid',
secret: '你的小程序密钥'
},
success:function(res){
that.getcode(res.data.access_token)
}
})
},
2.将要转换的页面和参数转换为小程序码。
请求微信的接口的时候请求方式为post,要注意设置相应的数据格式为arraybuffer,请求完毕后将数值转换为base64。
getcode(access_token){
var that=this;
var scene='id=123&name=jack';//拼接你要添加的参数
wx.request({
url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + access_token,
data: {
scene: scene,
page: 'pages/logs/logs',//线上的小程序一定要有这个页面
},
method:'POST',
responseType: 'arraybuffer',
success:function(res){
var src2 = wx.arrayBufferToBase64(res.data); //对数据进行转换
that.setData({
src2
})
}
})
},
base64在wxml上面显示方式为:
上面就得到了当前页面小程序的带参二维码。
扫码获取这个二维码携带的参数的方式是,在pages/logs/logs页面的onLoad函数里面获取options。
即:
onLoad: function (options) {
this.setData({
scene: decodeURIComponent(options.q)
})
},
此时可以得到q为“id=123&name=jack”。