重要:插件下载地址
此处显示下载插件ZIP
下载成功之后只需要引入common文件夹下的uqrcode.js
放到自己项目的文件夹下面,然后在需要使用的页面引入即可
项目目录结构如下:
onReady() {
let modules = uQRCode.getModules({
text: this.codeUrl,
errorCorrectLevel: uQRCode.errorCorrectLevel.H
})
let tileSize = (this.size - this.margin * 2) / modules.length
// 获取绘图所需的上下文
let ctx = uni.createCanvasContext('qrcode', this)
// 开始绘制
ctx.setFillStyle(this.backgroundColor)
ctx.fillRect(0, 0, this.size, this.size)
for (var row = 0; row < modules.length; row++) {
for (var col = 0; col < modules.length; col++) {
// 计算每一个小块的位置
var x = col * tileSize + this.margin
var y = row * tileSize + this.margin
var w = tileSize
var h = tileSize
var style = modules[row][col] ? this.foregroundColor : this.backgroundColor
ctx.setFillStyle(style)
ctx.fillRect(x, y, w, h)
}
}
ctx.draw()
}
最后呈现的效果图: