参考文章原文链接:微信小程序使用weapp-qrcode.js完成二维码的生成_fairy_404的博客-CSDN博客
首先给需要生成二维码的页面创建一个canvas
因为我这里实现的是弹窗展示二维码,所有就把 canvas移出页面,小伙伴们根据自己需求进行调整,weapp-qrcode.js内容参考链接中就有,我这里就不展示了,接着就可以在页面中直接使用了
const QRCode = require('../../utils/weapp-qrcode');//根据自己文件实际位置修改 Page({ /** * 页面的初始数据 */ data: { }, // 点击生成按钮触发事件 handleGenerate(code) { let that = this new QRCode('myCanvas', { text: 'https://xxx?id=' + code, width: 141, //canvas 画布的宽 height: 141, //canvas 画布的高 padding: 10, // 生成二维码四周自动留边宽度,不传入默认为0 correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度 colorDark: "#0378CC",//分别为两种交替颜色 colorLight: "white", callback: (res) => { //工具回调数据 wx.hideLoading() that.setData({ imagePath: res.path }) } }) }, /** * 生命周期函数--监听页面加载 */ onLoad(options) { this.handleGenerate('123')//生成二维码 }, })
通过以上方法就可以生成二维码了。
扫描二维码跳转到小程序
然后就是怎么实现扫描二维码跳转到小程序并接收参数了,先根据微信文档做好配置工作:
具体配置可查看:扫普通链接二维码打开小程序 | 微信开放文档
1、登录小程序后台配置>开发管理>开发设置>启用“扫普通链接二维码打开小程序”
2、添加>填写二维码规则等信息
3、获取参数(这里不好测试,因为只有上传代码和规则上线发布才会生效,先记录一下吧),需要在跳转页面的onLoad进行接收
onLoad: function (options) { // 扫描邀请码进入 if(options.q && options.q != "undefined"){ const qrUrl = decodeURIComponent(options.q) let jsonUrl = this.getwxUrlParam(qrUrl); let inviteId = jsonUrl.id; console.log(inviteId) } }, getwxUrlParam(url) { let theRequest = {}; if(url.indexOf("#") != -1){ const str=url.split("#")[1]; const strs=str.split("&"); for (let i = 0; i好了,基本就这样~~~撒花~~~了吗?
还差一点点,还有遇到的问题没记录呢:
I、以上的获取参数方法3,经过发布后已经确定能正确获取到链接参数(包括&后的参数,如:https://xxxx?id=123&code=456):
// 扫描邀请码进入 if(options.q && options.q != "undefined"){ // 获取到二维码原始链接内容 const qrUrl = decodeURIComponent(options.q) //获取参数,通过方法解析 let jsonUrl = that.GetwxUrlParam(qrUrl); //获取邀请码 let inviteId = jsonUrl.id; let inviteCode = jsonUrl.code; }II、因为微信小程序首页onLoad调用两次,导致获取链接参数失败问题:
这是因为微信小程序启动时,app.json文件中的pages第一行(即首页)是一定会执行的。这是第一次调用,这个时候可以获取到链接参数:
{ "pages": [, "pages/index/index" ] }
但是当你在app.js的onLunch存在以下代码,就会导致首页第二次调用。这时候options就是一个空对象{},就会将第一次的结果覆盖
//app.js App({ onLaunch: function (options) { ...... wx.redirectTo({ url: 'pages/index/index' }); } })这个时候,我们只需要将app.js中的wx.redirectTo({......})删除就可以解决这个问题了!!
真!!!完结~~~撒花~~~
还没有评论,来说两句吧...