preface

In the recent small program development, there is a need for offline generation of TWO-DIMENSIONAL code. Some excellent open source front-end libraries, jquery-QrCode and Node-QrCode, came to mind at that time. Since there is no DOM concept in applets, these libraries are not applicable in applets.

For this reason, appellate p.qrcode.js is used to quickly generate a qrcode in appellate apps based on the characteristics of appellate apps. The effect is shown below:

Here’s how to use it:

use

Create canvas tag

In the WXML file, create the canvas to draw and define width, height and canvasId. Since applets do not have apis for dynamically creating labels, this step cannot be omitted.

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

Call the draw method

Note Since the app does not support NPM package importing, you can copy APP.qrcode.min.js in the dist directory to the app.

You can also install app-qrcode NPM packages directly if your app uses a framework, such as Wepy, that supports introducing NPM packages.

npm install weapp-qrcode --save
Copy the code

After importing the js file, call drawQrcode() to draw the QR code.

import drawQrcode from 'weapp-qrcode'
// Otherwise, copy APP.qrcode.min.js in the dist directory to the projects directory
// import drawQrcode from '.. /.. /utils/weapp.qrcode.min.js'

drawQrcode({
  width: 200.height: 200.canvasId: 'myQrcode'.text: 'https://github.com/yingye'
}
Copy the code

API specification

parameter instructions The sample
width Must, qr code width, andcanvasthewidthconsistent 200
height Must, qr code height, withcanvastheheightconsistent 200
canvasId It has to be drawncanvasId ‘myQrcode’
text Must, qr code content ‘https://github.com/yingye’
typeNumber Optional: Specifies the calculation mode of the TWO-DIMENSIONAL code. The default value is -1 8
correctLevel This parameter is optional. Two-dimensional code error correction level. The default value is Advanced.{ L: 1, M: 0, Q: 3, H: 2 } 1
background Optional, background color of qr code, white by default ‘#ffffff’
foreground Optional, qr code foreground color, black by default ‘# 000000’

If you want to have a deeper understanding of the principle of two-dimensional code, it is recommended that you read the details and principles of the generation of two-dimensional code.

The original document

https://github.com/yingye/weapp-qrcode, if you feel not bad, remember to give a star the ~