How to generate QR code with mini program

How to generate a QR code from a small program: First, create a drawn canvas in the wxml file; then copy [weapp.qrcode.min.js] to the project; finally call [drawQrcode()] to draw QR code.

How to generate QR code by mini program:

1. Create canvas tag

First, create the canvas for drawing in the wxml file, and define width, height, and canvasId. Since the mini program does not have an API for dynamically creating labels, this step cannot be omitted.

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

2. Call the drawing method

Since the WeChat applet does not support the introduction of NPM packages, you can copy weapp.qrcode.min.js in the dist directory to the project.

If your applet uses a framework that supports the introduction of NPM packages, such as wepy, you can also install the weapp-qrcode NPM package directly.

npm install weapp-qrcode --save

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

import drawQrcode from 'weapp-qrcode'
// 或者，将 dist 目录下，weapp.qrcode.min.js 复制到项目目录中
// import drawQrcode from '../../utils/weapp.qrcode.min.js'
drawQrcode({
  width: 200,
  height: 200,
  canvasId: 'myQrcode',
  text: 'https://github.com/yingye'
}

API Description

参数  说明  示例
width   必须，二维码宽度，与canvas的width保持一致  200
height  必须，二维码高度，与canvas的height保持一致 200
canvasId    必须，绘制的canvasId  'myQrcode'
text    必须，二维码内容    'https://github.com/yingye'
typeNumber  非必须，二维码的计算模式，默认值-1  8
correctLevel    非必须，二维码纠错级别，默认值为高级，取值：{ L: 1, M: 0, Q: 3, H: 2 }    1
background  非必须，二维码背景颜色，默认值白色   '#ffffff'
foreground  非必须，二维码前景色，默认值黑色    '#000000'

Related learning recommendations: WeChat Mini Program Development Tutorial

The above is the detailed content of How to generate QR code with mini program. For more information, please follow other related articles on the PHP Chinese website!