weapp qrcode

weapp-qrcode

weapp.qrcode.js 在微信小程式中，快速產生二維碼

Usage

先在wxml 檔案中，建立繪製的canvas ，定義好width , height , canvasId 。

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

直接引入js 文件，使用drawQrcode()繪製二維碼。 !!!在呼叫drawQrcode()方法之前，請務必確保可以取得到canvas context 。

在v0.6.0 版本建置出多個文件，詳情移步Build Files說明。

 // 将 dist 目录下，weapp.qrcode.esm.js 复制到项目目录中
import drawQrcode from '../../utils/weapp.qrcode.esm.js'

drawQrcode ( {
  width : 200 ,
  height : 200 ,
  canvasId : 'myQrcode' ,
  // ctx: wx.createCanvasContext('myQrcode'),
  text : 'https://github.com/yingye' ,
  // v1.0.0+版本支持在二维码上绘制图片
  image : {
    imageResource : '../../images/icon.png' ,
    dx : 70 ,
    dy : 70 ,
    dWidth : 60 ,
    dHeight : 60
  }
} )

如果專案使用了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'
} ) 

DEMO

更多demo 可以參考examples目錄，範例包含原生語法及WePY、mpvue、Taro框架。

API

drawQrcode([options])

options

Type: Object

參數	說明	範例
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 }

位置資訊可參考下圖：

TIPS

weapp.qrcode.js 二維碼產生部分借鑒了jquery-qrcode 原始碼，可以參考jquery-qrcode。