小程序模板網(wǎng)

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

發(fā)布時(shí)間：2018-05-02 15:51 所屬欄目：小程序開發(fā)教程

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

ase64圖片格式輸出二維碼，二維碼內(nèi)容，比如url

  • options：參數(shù)對(duì)象

    
{
	ecc: 'H',               // 可選，容錯(cuò)級(jí)別，可選值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)



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

  • options：參數(shù)對(duì)象

    
{
	x: 0,                   // 可選，二維碼左上角點(diǎn)橫坐標(biāo)
	y: 0,                   // 可選，二維碼左上角點(diǎn)縱坐標(biāo)
	ctx: null,              // 必須，canvas繪制上下文或者canvasID
	ecc: 'H',               // 可選，容錯(cuò)級(jí)別，可選值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'	
}


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址：http://22321a.com/wxmini/doc/course/24180.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
QQ在線咨詢