微信小程序動(dòng)態(tài)二維碼生成組件wx-mini-qrcode

發(fā)表時(shí)間：2021-3-31

發(fā)布人：葵宇科技

瀏覽次數(shù)：184

GitHub地址：https://github.com/flyingsouthwind/wx-mini-qrcode

場景

最近制作一個(gè)在微信中為用戶生成整張海報(bào)的小程序，需要根據(jù)用戶的店鋪ID或商品ID實(shí)時(shí)動(dòng)態(tài)的生成店鋪或商品二維碼，試了下社區(qū)里已有的二維碼組件，感覺不是很適合自己的場景，使用也比較別扭，所以自己折騰了一個(gè)。

使用

const qrcode = require('wx-mini-qrcode/src/index');

Page({
    data: {
        qrcode0: ''
    },
    onReady(){
        let text = 'https://m.baidu.com';

        // 輸出base64格式
        let qrcode0 = qrcode.outputQRCodeBase64(text, {
            size: 400,
            color: '#CC6600',
            padding: 16,
            background: '#FFCC99'
        });

        this.setData({
            qrcode0
        })

        // canvas繪制模式一
        qrcode.drawQRCodeToCanvas(text, {
            ctx: 'qrcode1',
            size: 200,
            color: '#CC6600',
            padding: 16,
            background: '#FFCC99'
        });

        // canvas內(nèi)繪制模式二
        let qrcode2 = wx.createCanvasContext('qrcode2');
        qrcode.drawQRCodeToCanvas(text, {
            ctx: qrcode2,
            size: 200,
            color: '#CC6600',
            padding: 16,
            background: '#FFCC99'
        });
        qrcode2.draw();
    }
});

說明

支持兩種二維碼生成方式，使用canvas和不使用canvas。

由于在小程序中canvas是客戶端創(chuàng)建的原生組件，層級最高，限制了使用的靈活性。所以如果可以動(dòng)態(tài)的生成一張二維碼圖片，使用image插入頁面是最好的。使用outputQRCodeBase64 API可以做到，它可以動(dòng)態(tài)的生成base64圖片編碼。當(dāng)然，也可以使用drawQRCodeToCanvas API在canvas里實(shí)時(shí)繪制二維碼。

API

1. outputQRCodeBase64: function (text, options)

描述

以base64圖片格式輸出二維碼

參數(shù)

text：必須，二維碼內(nèi)容，比如url

options：參數(shù)對象

{
	ecc: 'H',               // 可選，容錯(cuò)級別，可選值L、M、Q和H（默認(rèn)）
	size: 256,              // 可選，二維碼尺寸，必須為整數(shù)。默認(rèn)為256
	padding: 0,             // 可選，單側(cè)空白邊寬度，默認(rèn)為0
	color: '#000000',       // 可選，二維碼顏色，必須是16進(jìn)制，默認(rèn)為'#000000'
	background: '#ffffff'   // 可選，二維碼背景色，必須是16進(jìn)制，默認(rèn)為'#ffffff'	
}

返回值

二維碼圖片的base64數(shù)據(jù)

2. drawQRCodeToCanvas: function (text, options)

描述

繪制二維碼到canvas

參數(shù)

text：必須，二維碼內(nèi)容，比如url

options：參數(shù)對象

{
	x: 0,                   // 可選，二維碼左上角點(diǎn)橫坐標(biāo)
	y: 0,                   // 可選，二維碼左上角點(diǎn)縱坐標(biāo)
	ctx: null,              // 必須，canvas繪制上下文或者canvasID
	ecc: 'H',               // 可選，容錯(cuò)級別，可選值L、M、Q和H（默認(rèn)）
	size: 200,              // 可選，二維碼尺寸，必須為整數(shù)。默認(rèn)為200
	padding: 0,             // 可選，單側(cè)空白邊寬度，默認(rèn)為0
	color: '#000000',       // 可選，二維碼顏色，必須是16進(jìn)制，默認(rèn)為'#000000'
	background: '#ffffff'   // 可選，二維碼背景色，必須是16進(jìn)制，默認(rèn)為'#ffffff'	
}