I haven't written an article for a long time. Recently, the company is going to do poster sharing activities. I need to generate and scan the QR code in the mini program to jump to the ordinary web page. I searched on github and found a one with good compatibility. I will call and share it.
I have tried a lot in the middle, and some of them will have problems on Android. I personally test this to be effective and compatible, and it has been applied to our project.
Due to the convenience of use, I have made certain changes to this, added the QR code white edge function and the function of supporting callback functions to directly obtain temporary files, hoping to help everyone.
github address
weapp-qrcodeClick to view (welcome star), which has the source project address
use
Download the project on github, the main file used is /utils/file
Introduce files:
You can directly place the file under your own project to introduce it
import QRCode from '/utils/'
use:
new QRCode('myQrcode',{
text: '',
width: 200,
height: 200,
padding: 12, // Generate QR code to automatically leave edge width around, default is 0 if it is not passed in correctLevel: , // QR code recognizable callback: (res) => {
()
// Next, you can directly call the WeChat mini program's API to save it locally or draw this QR code directly on the poster to see their respective needs }
})
structure:
<canvas class="canvas-code"canvas- style="background:#fff;width: 200px;height: 200px;"/>
Things to note
- As for width and height, the width and height in the js code and structure need to be consistent. The width and height style must be written into an inline style, otherwise there will be unexpected effects 😁
- The color of padding is controlled by yourself, and the background color of canvas is the color of the edge.
- correctLevel is the level that generates QR code recognition. The higher the level, the higher the recognizable, from low to high, so it is M, L, H, Q
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.