小程序字符串轉成二維碼遇到的坑

weapp-qrcode

weapp.qrcode.js 在 微信小程序 中，快速生成二維碼。

Usage

<canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>
複製代碼

在項目中我使用的是wepy框架，因此直接安裝weapp-qrcode npm包。

命令：
npm install weapp-qrcode --save
複製代碼

import drawQrcode from 'weapp-qrcode'
 
drawQrcode({
  width: 200,
  height: 200,
  canvasId: 'myQrcode',
  text: 'https://github.com/yingye'
})
複製代碼

寫到這目前能夠生成二維碼了=_=

坑了來。。。。

canvas只有一個id，能夠生成不一樣的二維碼,可是不能再同一個畫布並列生成多個，由於id是惟一的只能生成一個。 因此我作了如下處理

drawQrcode({
  width: '200',
  height: '200',
  canvasId: e.currentTarget.dataset.id + new Date().getTime(),
  text: couponCode,
  success: res=> {
    console.log(res)
  }
})
複製代碼

canvasId是每一個優惠券的id，我點擊每一個優惠券會生成對應的二維碼，可是再次點擊就不展現二維碼了， 因此我在後面拼接了時間戳，每次點擊都會生成對應的二維碼

eg:

API

參數	說明	示例
width	必須，二維碼寬度，與canvas的width保持一致	200
height	必須，二維碼高度，與canvas的height保持一致	200
canvasId	非必須，繪製的canvasId	'myQrcode'
ctx	非必須，繪圖上下文，可經過 wx.createCanvasContext('canvasId') 獲取，v1.0.0+版本支持	'wx.createCanvasContext('canvasId')'
text	必須，二維碼內容	'https://github.com/yingye'
typeNumber	非必須，二維碼的計算模式，默認值-1	8
correctLevel	非必須，二維碼糾錯級別，默認值爲高級，取值：{ L: 1, M: 0, Q: 3, H: 2 }	1
background	非必須，二維碼背景顏色，默認值白色	'#ffffff'
foreground	非必須，二維碼前景色，默認值黑色	'#000000'
_this	非必須，若在組件中使用，須要傳入，v0.7.0+版本支持	this
callback	非必須，繪製完成後的回調函數，v0.8.0+版本支持。安卓手機兼容性問題，可經過自行設置計時器來解決，更多能夠參考 issue #18	function (e) { console.log('e', e) }
x	非必須，二維碼繪製的 x 軸起始位置，默認值0，v1.0.0+版本支持	100
y	非必須，二維碼繪製的 y 軸起始位置，默認值0，v1.0.0+版本支持	100
image	非必須，在 canvas 上繪製圖片，層級高於二維碼，v1.0.0+版本支持，更多可參考drawImage	{ imageResource: '', dx: 0, dy: 0, dWidth: 100, dHeight: 100 }