代码拉取完成，页面将自动刷新
本项目用于在微信小程序中生成二维码，也可用于第三方框架Mpvue,Taro等。
git clone https://github.com/demi520/wxapp-qrcode.git
1.创建canvas节点,以及设置canvas-id。(可以控制该区域不显示，但是必须要存在)
<canvas style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="mycanvas"/>
2.引入qrcode.js,将 utils/qrcode.js 文件复制到自己工程里，并引入。
// 注意： 这里xxx是你自己的路径
let QR = require("xxxx/qrcode.js") // require方式
import QR from 'xxxx/qrcode.js' // es6的方式
3.在js文件中，定义相关的方法，要注意在data中创建imagePath（最终生成的图片路径）,可以将img的src属性绑定imagePath
createQrCode: function (content, canvasId, cavW, cavH) {
//调用插件中的draw方法，绘制二维码图片
QR.api.draw(content, canvasId, cavW, cavH);
this.canvasToTempImage(canvasId);
},
//获取临时缓存图片路径，存入data中
canvasToTempImage: function (canvasId) {
let that = this;
wx.canvasToTempFilePath({
canvasId, // 这里canvasId即之前创建的canvas-id
success: function (res) {
let tempFilePath = res.tempFilePath;
console.log(tempFilePath);
that.setData({ // 如果采用mpvue,即 this.imagePath = tempFilePath
imagePath:tempFilePath,
});
},
fail: function (res) {
console.log(res);
}
});
}
4.绑定事件，调用createQrCode，生成二维码
createQrCode ('wxapp-qrcode', 'mycanvas', 300, 300)
封装方法时: 添加上this, QR.api.draw(url, canvasId, cavW, cavH, this); 可参考qrcode.js 768行，wx.createCanvasContext
可参考 pages/main/index.js 中的 setCanvasSize 方法。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手