100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序生成带参二维码——并通过扫码获取二维码的参数

微信小程序生成带参二维码——并通过扫码获取二维码的参数

时间:2018-09-29 19:51:17

相关推荐

微信小程序生成带参二维码——并通过扫码获取二维码的参数

注意:保证当前小程序要有线上版本

通过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: '?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./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./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-/202622333094380.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”。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。