The WeChat applet uses weapp-qrcode to generate a QR code and overlays a layer of QR code expired text on the layer

Search weapp-qrcode on github to download the js file in dist and extract it to the applet directory

Introduced into the js method in the following way

import drawQrcode from '../../utils/weapp.qrcode.esm'

wxml

<canvas type="2d" style="width: 520rpx; height: 520rpx;" id="myQrcode"></canvas>

js method to generate QR code

        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)
                }
            })
        })

The effect diagram of QR code generation is as follows. The following is the js method

to add a layer of expired text to the QR code after the countdown ends.

     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)
            })

The following is the rendering of the realization.

The whole process is like this. I have limited ability and hope to help you.