場(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'
}
|