My requirement is to generate multiple verification codes in a loop, and each verification code has its own string information. Note that it is to bring information, rather than simply generate a QR code , but the WeChat applet does not provide a corresponding interface for generating a QR code.
Here are two solutions:
Solution 1: Use weapp.qrcode library
github address: GitHub - yingye/weapp-qrcode: weapp.qrcode.js Quickly generate QR codes in WeChat applets
This method is also possible, but it is only suitable for generating a QR code. If the requirement is to generate multiple QR codes and scroll up and down the screen to preview, the following problems will arise:
Look, it will cover part of the content at the bottom. The reason is that the WeChat native applet canvas layer is too high, even if you adjust the z-index, it is useless. So weapp.qrcode is only suitable for the application scenario of generating a single QR code.
Solution 2: Use the QRCodes.js plugin
The advantage of this method is that it can avoid the problem of high level of native canvas, and simply use image instead.
The js library address is: https://files.cnblogs.com/files/RVon/QRCodes.js
1. Put QRCode.js into the utils folder:
2. At the end of the js file, you can see that a createQrCodeImg method is provided to the outside. This is the method to generate a QR code:
module.exports = {
createQrCodeImg: createQrCodeImg
};
3. Reference QRCode.js in the js file of the corresponding page:
var QR = require(\'../../utils/QRCode\')
4. Call the QR.createQrCodeImg() method in the method:
var imgData = QR.createQrCodeImg(\'123\')
The imgData here is the generated QR code in base64 format, which can be directly put into img for use
The effect is as follows:
This requirement has tossed me for most of the day, and in the end it was actually very simple to do. If it helps you, move your little finger and give me a little like~