开发时候偶尔有遇到需要将后台传过来的网址转换成二维码,让用户展示扫码使用
这里和js一样可以使用 qrcodejs来完成
贴上github的网址 https://github.com/davidshimjs/qrcodejs
首先,在wxml中写入需要展示二维码的canvas
<canvas canvas-id='canvas'></canvas>
然后去Git上下载qrcode中的util,并在需要使用的js中引入
var QRCode = require('../../utils/weapp-qrcode.js');
然后再函数中new一个QRCode的对象
qrcode = new QRCode('canvas', { //'canvas'为html中定义的canvas-id
text: "https://www.baidu.com",
width: 150, // 二维码宽度
height: 150, // 二维码高度
colorDark: "#000000", //设置二维码双色
colorLight: "#ffffff", //设置二维码双色
correctLevel: QRCode.CorrectLevel.H, //容错级别
});
运行后,得到二维码,扫描进入百度
ps:text写入网址时,要记得带 "https://" ,否则浏览器不识别该字符串为网址,会直接将网址显示为字符
最后如果需要动态更改二维码,
需要将QRCode赋值,然后makeCode即可
qrcode = new QRCode('canvas', {
text: "https://www.baidu.com",
width: 150,
height: 150,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H,
});
qrcode.makeCode(e.target.dataset.code);