Use weapp.qrcode.js to quickly generate QR codes in WeChat applets
1. Effect
Two, specific steps, code
Download the weapp-qrcode code
and copy the weapp.qrcode.esm.js in the dist directory to the project directory (here is the utils directory)
1. Small program wxml file
to create canvas and define width, height, canvasId
<view class="">
<canvas style="width: 200px; height: 200px;margin:0 auto" canvas-id="myQrcode"></canvas>
</view>
2. Small program js code
In a very simple case, the onLoad function directly generates a QR code
// 将 dist 目录下，weapp.qrcode.esm.js 复制到项目utils目录下
// 直接引入 js 文件
import drawQrcode from 'weapp-qrcode';
Page({
data: {
qrcodeWidth: 0
},
onLoad: function () {
drawQrcode({
width: 200, // 必须，二维码宽度，与canvas的width保持一致
height: 200, // 必须，二维码高度，与canvas的height保持一致
canvasId: 'myQrcode',
background:'#ffffff', // 非必须，二维码背景颜色，默认值白色
foreground: '#2bb15e', // 非必须，二维码前景色，默认值黑色 '#000000'
// ctx: wx.createCanvasContext('myQrcode'), // 非必须，绘图上下文，可通过 wx.createCanvasContext('canvasId') 获取，v1.0.0+版本支持
text: 'https://blog.csdn.net/chushiyan', // 必须，二维码内容
// v1.0.0+版本支持在二维码上绘制图片
image: {
// imageResource: '../../images/icon.png', // 指定二维码小图标
dx: 70,
dy: 70,
dWidth: 60,
dHeight: 60
}
})
},
})
Run, the effect is just like the previous screenshot.