Generate QR code in wechat applet

Usually in wechat applet , Generating QR code is a very common scenario , But check the official documents , There is no ready-made component to use .

After searching , The generation of two-dimensional code components generally requires the help of a third-party library . The implementation steps are divided into ：

1. Download third-party libraries
2. Install third party libraries
3. wxml Generate two-dimensional code in
4. js Introduction in

Download third-party libraries

There is a ready-made Library , Can generate QR code . I'm usually used to it gitee download . Enter the download address in the browser

https://gitee.com/WeiDoctor/weapp-qrcode-canvas-2d

The download method is to click the clone button

After downloading, unzip ,dist The files in the directory are what we need

Install third party libraries

The library installation method is also relatively simple , We can now create a new one under the applet directory utils Folder

take dist In the catalog js Copy it all to utils Under the table of contents

This completes the installation of the library

wxml Generate two-dimensional code in

QR code usage canvas Component generation , So you need to be in wxml Add... To the file canvas Components

<canvas type="2d" style="width: 260px; height: 260px;" id="myQrcode"></canvas>

js Third party libraries are introduced into

If you want to use a third-party library, you need to use import Sentence introduction , The specific code is as follows

// pages/test/index.js
import drawQrcode from '../../utils/weapp.qrcode.esm.js'
Page({
    

  /** *  Initial data of the page  */
  data: {
    

  },

  /** *  Life cycle function -- Monitor page loading  */
  onLoad(options) {
    
    const query = wx.createSelectorQuery()
    query.select('#myQrcode')
        .fields({
    
            node: true,
            size: true
        })
        .exec((res) => {
    
            var canvas = res[0].node
    
            //  Calling method drawQrcode Generate qr code 
            drawQrcode({
    
                canvas: canvas,
                canvasId: 'myQrcode',
                width: 260,
                padding: 30,
                background: '#ffffff',
                foreground: '#000000',
                text: ' Personal QR code information ',
            })
    
            //  Get temporary path （ After you get it , Do whatever you want ）
            wx.canvasToTempFilePath({
    
                canvasId: 'myQrcode',
                canvas: canvas,
                x: 0,
                y: 0,
                width: 260,
                height: 260,
                destWidth: 260,
                destHeight: 260,
                success(res) {
    
                    console.log(' QR code temporary path ：', res.tempFilePath)
                },
                fail(res) {
    
                    console.error(res)
                }
            })
        })
  },

  /** *  Life cycle function -- Listening page first rendering completed  */
  onReady() {
    

  },

  /** *  Life cycle function -- Monitor page display  */
  onShow() {
    

  },

  /** *  Life cycle function -- Monitor page hidden  */
  onHide() {
    

  },

  /** *  Life cycle function -- Monitor page uninstall  */
  onUnload() {
    

  },

  /** *  Page related event handler -- Monitor user pull-down action  */
  onPullDownRefresh() {
    

  },

  /** *  Handling function of page pull bottom event  */
  onReachBottom() {
    

  },

  /** *  Users click the upper right corner to share  */
  onShareAppMessage() {
    

  }
})

We just need to modify it text The value in the attribute can

summary

This article introduces the method of generating two-dimensional code for small programs , With the help of the third-party library, the development speed can be greatly improved .