Weapp-QRCode: Generating QR Codes in WeChat Mini Programs

weapp-qrcode is a library designed specifically for QR code generation within WeChat Mini Programs. While the core logic is derived from davidshimjs/qrcodejs, the image rendering component has been entirely rebuilt to maintain compatibility with the WeChat runtime environment—a functionality the original library does not support natively.

Implementation Guide

Responsive Implementation (Utilizing rpx)

1. Code Reference: A complete implementation can be found in the pages/responsive/responsive directory.

2. Integration Steps

Module Import: Import both the QRCode module and the rpx2px utility into your page's .js file.

const QRCode = require('../../utils/weapp-qrcode.js')
import rpx2px from '../../utils/rpx2px.js'

Dimension Calculation: Convert rpx units to px using the rpx2px helper. This ensures the canvas scales properly across different screen densities. For example, a value of 300rpx will be converted to 150px on an iPhone 6.

const qrcodeWidth = rpx2px(300)

QR Code Initialization: Instantiate the QRCode object within the onLoad lifecycle method. Configure the instance with your desired parameters.

Page({
    data: {
        qrcodeWidth: qrcodeWidth,
    },
    onLoad: function (options) {
        qrcode = new QRCode('canvas', {
            text: "https://github.com/tomfriwel/weapp-qrcode",
            image: '/images/bg.jpg', // Optional background image
            width: qrcodeWidth,
            height: qrcodeWidth,
            colorDark: "#1CA4FC",
            colorLight: "white",
            correctLevel: QRCode.CorrectLevel.H,
        });
    },
})

WXML Template: In your .wxml file, bind the canvas style dynamically to the qrcodeWidth variable.

<canvas class='canvas' style="width:{{qrcodeWidth}}px; height:{{qrcodeWidth}}px;" canvas-id='canvas' bindlongtap='save'></canvas>

Styling: Avoid defining static dimensions in your .wxss file. Rely on the dynamic data binding to handle responsive sizing.

Fixed-Size Implementation

1. Code Reference: Refer to pages/index/index for the standard implementation.

2. Integration Steps

Page Structure: Place a <canvas> tag in your .wxml file. It is common practice to bind a long-press event to allow users to save the generated image.

<canvas class='canvas' canvas-id='canvas' bindlongtap='save'></canvas>

Module Import: Require the QRCode module in your script.

var QRCode = require('../../utils/weapp-qrcode.js')

Initialization: Create the QRCode instance after the page has loaded, using fixed pixel (px) values for dimensions.

var qrcode = new QRCode('canvas', {
    text: "https://github.com/tomfriwel/weapp-qrcode",
    width: 150,
    height: 150,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H,
});

Styling: Set the dimensions in your .wxss file to match the pixel values defined in the JavaScript configuration.

.canvas {
    width: 150px;
    height: 150px;
}

Parameter Reference

Updating the QR Code

To modify the content of an existing QR code, use the qrcode.makeCode('new string') method. This triggers an immediate redraw of the canvas with the updated data.

Technical Overview

The library utilizes QRCodeModel for data management, which includes an addData(text) method for input queuing and a make() method to construct the module matrix.

Rendering is performed by QRCode.makeImage(), which paints the generated matrix onto the WeChat canvas. If you need to export the result, the exportImage(callback) method allows you to retrieve the canvas data as a local image file for saving or sharing.

Depending on your UI requirements, you can implement either the responsive or fixed-size approach by integrating the utility files into your project.