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

陌々發表於2019-01-08
字串

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 }

相關文章