直播小程式原始碼，小程式生成二維碼 (相容H5、微信小程式)

直播小程式原始碼，小程式生成二維碼 (相容H5、微信小程式)

1、<canvas type="2d" style="width: 127px; height: 127px;position: fixed;top: -1000px;" id="myQrcode"></canvas>

注意：不能再v-if內，否則會導致找不到該節點 

2、import drawQrcode from '@/common/qrcodeJs/qrcode.js';

注意：也可以npm安裝 npm install weapp-qrcode-canvas-2d --save

3、這個是專案中實踐使用的，沒有使用疊加圖片的

/**
* 生成二維碼（沒有使用疊加圖片）
* text - 碼值
* */
handleMakeQrcode(text) {
    return new Promise((resolve, reject) => {
    const query = uni.createSelectorQuery()
    query.select('#myQrcode').fields({
    node: true,
    size: true
    }).exec((res) => {
    // 獲取node節點例項，目前僅微信，快手，京東小程式支援；
    // #ifdef MP-WEIXIN || MP-KUAISHOU
    let canvas = res[0].node
    // #endif
    // 呼叫方法drawQrcode生成二維碼
    drawQrcode({
    // #ifdef MP-WEIXIN || MP-KUAISHOU
    canvas: canvas,
    // #endif
    canvasId: 'myQrcode',
    width: 127,
    padding: 0,
    background: '#ffffff',
    foreground: '#000000',
    text: text,
    })
    // 獲取臨時路徑
    uni.canvasToTempFilePath({
    canvasId: 'myQrcode',
                // #ifdef MP-WEIXIN || MP-KUAISHOU
    canvas: canvas,
                // #endif
    x: 0,
    y: 0,
    width: 127,
    height: 127,
    destWidth: 127,
    destHeight: 127,
    success(res) {
                           resolve(res.tempFilePath); // 臨時路徑
    },
    fail(res) {
        console.error(res);
                           reject();
    }
    })
    });
    })
}
/*
* 文件中示例 - 有疊加圖片的（在二維碼中加logo）
*/
const query = wx.createSelectorQuery()
 
query.select('#myQrcode')
    .fields({
        node: true,
        size: true
    })
    .exec(async (res) => {
        var canvas = res[0].node
 
        var img = canvas.createImage();
        img.src = "/image/logo.png"
 
        img.onload = function () {
            // img.onload完成後才能呼叫 drawQrcode方法
 
            var options = {
                canvas: canvas,
                canvasId: 'myQrcode',
                width: 260,
                padding: 30,
                paddingColor: '#fff',
                background: '#fff',
                foreground: '#000000',
                text: '
                image: {
                    imageResource: img,
                    width: 80, // 建議不要設定過大，以免影響掃碼
                    height: 80 // 建議不要設定過大，以免影響掃碼
                    round: true // Logo圖片是否為圓形
                }
            }
 
            drawQrcode(options)
 
            // 獲取臨時路徑（得到之後，想幹嘛就幹嘛了）
            wx.canvasToTempFilePath({
                x: 0,
                y: 0,
                width: 260,
                height: 260,
                destWidth: 600,
                destHeight: 600,
                canvasId: 'myQrcode',
                canvas: canvas,
                success(res) {
                    console.log('二維碼臨時路徑為：', res.tempFilePath)
                },
                fail(res) {
                    console.error(res)
                }
            })
 
        };
    })

以上就是 直播小程式原始碼，小程式生成二維碼 (相容H5、微信小程式)，更多內容歡迎關注之後的文章