微信小程序動态二維碼生成組件wx-mini-qrcode

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

發布人(rén)：融晨科技

浏覽次數：185

GitHub地(dì / de)址：https://github.com/flyingsouthwind/wx-mini-qrcode

場景

最近制作一個(gè)在(zài)微信中爲(wéi / wèi)用戶生成整張海報的(de)小程序，需要(yào / yāo)根據用戶的(de)店鋪ID或商品ID實時(shí)動态的(de)生成店鋪或商品二維碼，試了(le／liǎo)下社區裏已有的(de)二維碼組件，感覺不(bù)是(shì)很适合自己的(de)場景，使用也(yě)比較别扭，所以(yǐ)自己折騰了(le／liǎo)一個(gè)。

使用

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

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

        // 輸出(chū)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内繪制模式二
        let qrcode2 = wx.createCanvasContext('qrcode2');
        qrcode.drawQRCodeToCanvas(text, {
            ctx: qrcode2,
            size: 200,
            color: '#CC6600',
            padding: 16,
            background: '#FFCC99'
        });
        qrcode2.draw();
    }
});

說(shuō)明

支持兩種二維碼生成方式，使用canvas和(hé / huò)不(bù)使用canvas。

由于(yú)在(zài)小程序中canvas是(shì)客戶端創建的(de)原生組件，層級最高，限制了(le／liǎo)使用的(de)靈活性。所以(yǐ)如果可以(yǐ)動态的(de)生成一張二維碼圖片，使用image插入頁面是(shì)最好的(de)。使用outputQRCodeBase64 API可以(yǐ)做到(dào)，它可以(yǐ)動态的(de)生成base64圖片編碼。當然，也(yě)可以(yǐ)使用drawQRCodeToCanvas API在(zài)canvas裏實時(shí)繪制二維碼。

API

1. outputQRCodeBase64: function (text, options)

描述

以(yǐ)base64圖片格式輸出(chū)二維碼

參數

text：必須，二維碼内容，比如url

options：參數對象

{
	ecc: 'H',               // 可選，容錯級别，可選值L、M、Q和(hé / huò)H（默認）
	size: 256,              // 可選，二維碼尺寸，必須爲(wéi / wèi)整數。默認爲(wéi / wèi)256
	padding: 0,             // 可選，單側空白邊寬度，默認爲(wéi / wèi)0
	color: '#000000',       // 可選，二維碼顔色，必須是(shì)16進制，默認爲(wéi / wèi)'#000000'
	background: '#ffffff'   // 可選，二維碼背景色，必須是(shì)16進制，默認爲(wéi / wèi)'#ffffff'	
}

返回值

二維碼圖片的(de)base64數據

2. drawQRCodeToCanvas: function (text, options)

描述

繪制二維碼到(dào)canvas

參數

text：必須，二維碼内容，比如url

options：參數對象

{
	x: 0,                   // 可選，二維碼左上(shàng)角點橫坐标
	y: 0,                   // 可選，二維碼左上(shàng)角點縱坐标
	ctx: null,              // 必須，canvas繪制上(shàng)下文或者canvasID
	ecc: 'H',               // 可選，容錯級别，可選值L、M、Q和(hé / huò)H（默認）
	size: 200,              // 可選，二維碼尺寸，必須爲(wéi / wèi)整數。默認爲(wéi / wèi)200
	padding: 0,             // 可選，單側空白邊寬度，默認爲(wéi / wèi)0
	color: '#000000',       // 可選，二維碼顔色，必須是(shì)16進制，默認爲(wéi / wèi)'#000000'
	background: '#ffffff'   // 可選，二維碼背景色，必須是(shì)16進制，默認爲(wéi / wèi)'#ffffff'	
}