注意:保证当前小程序要有线上版本
通过url拼接参数。http://***.com?id=123
这种方式要利用一个插件(GitHub - adventurewithme/chajian: 用到的各种插件里面的qrcode.js)。
要转换的这个url必须要在微信公众平台配置了扫普通链接二维码打开小程序,如下图:
测试连接是开发人员测试用的,跳转至测试版本的小程序,如果,转换的url不是测试连接,那么就会跳转到线上版本的小程序。并且有一个缺点,只能跳转到下图配置的小程序功能页面。
wxml部分:
<view class="container-box"><view class="img-box"><image mode="scaleToFill" src="{{imagePath}}"></image></view>
</view>
在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);},//适配不同屏幕大小的canvassetCanvasSize: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 errorconsole.log("获取设备信息失败"+e);} return size;} ,createQrCode:function(url,canvasId,cavW,cavH){//调用插件中的draw方法,绘制二维码图片
let _=this;QR.api.draw(url,canvasId,cavW,cavH);
//如果在自定义组件中使用,要传入this 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);}});
//如果在自定义组建中使用,这里要传入this
//wx.canvasToTempFilePath({****同上},that)},})
这样页面上就生成了一个普通二维码。
当placeholder与测试连接相同的时候,扫这个二维码就跳转至测试版本的小程序,placeholder与测试连接不同,则跳转至线上版本的小程序。
获取这个placeholder后拼接的参数的方式是:在打开的这个页面的onLoad函数里面获取options。
即:
上面这张图是小编的url只拼接了一个参数id,如果拼接了多个参数,需要按照情况处理。
如此就得到了url中的id。
通过微信开发文档将页面转换为带参数的小程序码(一定要保证当前小程序有线上版本)
参考文档:获取不限制的小程序码 | 微信开放文档
注意:这种方式是一直会跳转到线上版本的小程序。
小编全程通过前端请求,所以要将微信开发者工具调为不校验合法域名。
- 首先我们需要获取小程序的access_token
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上面显示方式为:
<image src="https://img-blog.csdnimg.cn/2022010622333094380.png" style="width:750rpx;height:750rpx"></image>
上面就得到了当前页面小程序的带参二维码。
扫码获取这个二维码携带的参数的方式是,在pages/logs/logs页面的onLoad函数里面获取options。
即:
onLoad: function (options) {this.setData({scene: decodeURIComponent(options.q)})},
此时可以得到q为“id=123&name=jack”。