参考文章原文链接:微信小程序使用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')//生成二维码 },})
通过以上方法就可以生成二维码了。
然后就是怎么实现扫描二维码跳转到小程序并接收参数了,先根据微信文档做好配置工作:
具体配置可查看:扫普通链接二维码打开小程序 | 微信开放文档
登录小程序后台配置>开发管理>开发设置>启用“扫普通链接二维码打开小程序”
2、添加>填写二维码规则等信息
获取参数(这里不好测试,因为只有上传代码和规则上线发布才会生效,先记录一下吧),需要在跳转页面的onLoad进行接收
onLoad: function (options) { // 扫描邀请码进入 if(options.q && options.q != "undefined"){ const qrUrl = decodeURIComponent(options.q) let jsonUrl = this.getwxUrlParam(qrUrl); let inviteCode = jsonUrl.id; console.log(inviteCode) } }, getwxUrlParam(url) { let theRequest = {}; if(url.indexOf("#") != -1){ const str=url.split("#")[1]; const strs=str.split("&"); for (let i = 0; i < strs.length; i++) { theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]); } }else if(url.indexOf("?") != -1){ const str=url.split("?")[1]; const strs=str.split("&"); for (let i = 0; i < strs.length; i++) { theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]); } } return theRequest;},
好了,基本就这样~~~撒花
来源地址:https://blog.csdn.net/qq_38405436/article/details/131249889