在github搜索weapp-qrcode下载dist中的js文件解压到小程序目录下
通过以下方式引入到js方法中
import drawQrcode from '../../utils/weapp.qrcode.esm'
wxml
<canvas type="2d" style="width: 520rpx; height: 520rpx;" id="myQrcode"></canvas>
生成二维码js方法
let that = this
const query = wx.createSelectorQuery()
query.select('#myQrcode').fields({
node: true,
size: true
}).exec((res) => {
var canvas = res[0].node
// 调用方法drawQrcode生成二维码
drawQrcode({
canvas: canvas,
canvasId: 'myQrcode',
width: 260,
padding: 30,
background: that.data.background,
foreground: that.data.color,
text: that.data.content,
})
// 获取临时路径(得到之后,想干嘛就干嘛了)
wx.canvasToTempFilePath({
canvasId: 'myQrcode',
canvas: canvas,
x: 0,
y: 0,
width: 260,
height: 260,
destWidth: 260,
destHeight: 260,
success(res) {
that.setData({
tempFilePath: res.tempFilePath
})
},
fail(res) {
console.error(res)
}
})
})
二维码生成效果图如下
下面是在倒计时结束后给二维码添加上一层过期文字
js方法
var that = this
wx.createSelectorQuery().select('#myQrcode').fields({
node: true,
size: true,
})
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio;
ctx.scale(dpr, dpr);
var text = '二维码已过期'
ctx.fillStyle = 'red'
ctx.font = "bold 20px serif";
ctx.fillText(text, 70, 130)
})
下面是实现的效果图
整个过程就是这样,能力有限希望能帮助到你。