weapp qrcode

weapp-qrcode

weapp.qrcode.js quickly generates QR codes in WeChat mini programs

Usage

First, create canvas for drawing in the wxml file, and define width , height , and canvasId .

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

Directly import the js file and use drawQrcode() to draw the QR code. !!!Before calling the drawQrcode() method, be sure to obtain canvas context .

In the v0.6.0 version, multiple files are built, please refer to the Build Files description for details.

 // 将 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
  }
} )

If the project uses the wepy framework, you can directly install the weapp-qrcode npm package.

 npm install weapp-qrcode --save

 import drawQrcode from 'weapp-qrcode'

drawQrcode ( {
  width : 200 ,
  height : 200 ,
  canvasId : 'myQrcode' ,
  text : 'https://github.com/yingye'
} ) 

DEMO

For more demos, please refer to the examples directory. Examples include native syntax and WePY, mpvue, and Taro frameworks.

API

drawQrcode([options])

options

Type: Object

parameter	illustrate	Example
width	Must, the width of the QR code must be consistent with width of canvas	200
height	Must, the height of the QR code must be consistent with height of canvas .	200
canvasId	Optional, canvasId to draw	'myQrcode'
ctx	Optional, drawing context, can be obtained through wx.createCanvasContext('canvasId') , supported by v1.0.0+ version	'wx.createCanvasContext('canvasId')'
text	Required, QR code content	'https://github.com/yingye'
typeNumber	Optional, QR code calculation mode, default value -1	8
correctLevel	Optional, QR code error correction level, the default value is advanced, values: { L: 1, M: 0, Q: 3, H: 2 }	1
background	Optional, QR code background color, default value is white	'#ffffff'
foreground	Optional, QR code foreground color, default value is black	'#000000'
_this	Not required. If used in a component, it needs to be passed in. Supported by version v0.7.0+	this
callback	Optional, callback function after drawing is completed, supported by version v0.8.0+. Android phone compatibility issues can be solved by setting the timer yourself. For more information, please refer to issue #18	function (e) { console.log('e', e) }
x	Optional, the starting position of the x-axis for QR code drawing, the default value is 0, supported by v1.0.0+ version	100
y	Optional, the starting position of the y-axis for QR code drawing, the default value is 0, supported by v1.0.0+ version	100
image	It is not necessary to draw pictures on canvas. The level is higher than QR code . It is supported by version v1.0.0+. For more information, please refer to drawImage.	{ imageResource: '', dx: 0, dy: 0, dWidth: 100, dHeight: 100 }

The location information can be seen in the figure below:

TIPS

The QR code generation part of weapp.qrcode.js draws on the jquery-qrcode source code. You can refer to jquery-qrcode.