直播小程序源码，小程序生成二维码 (兼容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: 'https://gitee.com/WeiDoctor/weapp-qrcode-canvas-2d',
                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、微信小程序)，更多内容欢迎关注之后的文章