場景
最近制作一個在微信中為用戶生成整張海報的小程序，需要根據用戶的店鋪ID或商品ID實時動態的生成店鋪或商品二維碼，試了下社區里已有的二維碼組件，感覺不是很適合自己的場景，使用也比較別扭，所以自己折騰了一個。
使用
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內繪制模式二
let qrcode2 = wx.createCanvasContext('qrcode2');
qrcode.drawQRCodeToCanvas(text, {
ctx: qrcode2,
size: 200,
color: '#CC6600',
padding: 16,
background: '#FFCC99'
});
qrcode2.draw();
}
});
說明
支持兩種二維碼生成方式，使用canvas和不使用canvas。
由于在小程序中canvas是客戶端創建的原生組件，層級最高，限制了使用的靈活性。所以如果可以動態的生成一張二維碼圖片，使用image插入頁面是最好的。使用outputQRCodeBase64 API可以做到，它可以動態的生成base64圖片編碼。當然，也可以使用drawQRCodeToCanvas API在canvas里實時繪制二維碼。
API
1. outputQRCodeBase64: function (text, options)
ase64圖片格式輸出二維碼，二維碼內容，比如url
-
options：參數對象
{
ecc: 'H', // 可選，容錯級別，可選值L、M、Q和H（默認）
size: 256, // 可選，二維碼尺寸，必須為整數。默認為256
padding: 0, // 可選，單側空白邊寬度，默認為0
color: '#000000', // 可選，二維碼顏色，必須是16進制，默認為'#000000'
background: '#ffffff' // 可選，二維碼背景色，必須是16進制，默認為'#ffffff'
}回值
二維碼圖片的base64數據
2. drawQRCodeToCanvas: function (text, options)
繪制二維碼到can
text：必須，二維碼內容，比如url
-
options：參數對象
{
x: 0, // 可選，二維碼左上角點橫坐標
y: 0, // 可選，二維碼左上角點縱坐標
ctx: null, // 必須，canvas繪制上下文或者canvasID
ecc: 'H', // 可選，容錯級別，可選值L、M、Q和H（默認）
size: 200, // 可選，二維碼尺寸，必須為整數。默認為200
padding: 0, // 可選，單側空白邊寬度，默認為0
color: '#000000', // 可選，二維碼顏色，必須是16進制，默認為'#000000'
background: '#ffffff' // 可選，二維碼背景色，必須是16進制，默認為'#ffffff'
}
|
