Das WeChat-Applet verwendet weapp-qrcode, um einen QR-Code zu generieren, und überlagert die Ebene mit einer Ebene mit abgelaufenem QR-Code-Text

Durchsuchen Sie weapp-qrcode auf Github, um die JS-Datei in dist herunterzuladen und in das Applet-Verzeichnis zu extrahieren

Auf folgende Weise in die js-Methode eingeführt

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

wxml

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

js-Methode zum Generieren von 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)
                }
            })
        })

Das Effektdiagramm der QR-Code-Generierung sieht wie folgt aus: Das Folgende ist die js-Methode

, um dem QR-Code nach Ablauf des Countdowns eine Ebene mit abgelaufenem Text hinzuzufügen.

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

Das Folgende ist die Darstellung der Erkenntnis.

Der gesamte Prozess ist wie folgt. Ich habe nur begrenzte Fähigkeiten und hoffe, Ihnen helfen zu können.