微信小程序二维码生成工具

weapp - qrcode 是用于微信小程序二维码生成工具，生成二维码数据的核心代码来自 davidshimjs/qrcodejs，针对微信小程序的运行环境，对原工具中无法直接使用的二维码图片生成功能进行了升级改造，能够在微信小程序中正常使用。

使用方法

自适应版本（使用 rpx 为单位）

1、代码参考：完整代码可查看 pages/responsive/responsive。

2、关键步骤

引入文件：在页面 js 中引入 QRCode 模块和 rpx2px 转换工具，代码如下：

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

计算尺寸：通过 rpx2px 工具将 rpx 单位转换为 px 单位，获取 canvas 的实际长宽。例如，300rpx 在 iPhone 6s 上对应 150px，代码示例：

const qrcodeWidth = rpx2px(300)

初始化二维码：在 onLoad 生命周期函数中创建 QRCode 实例，传入相关参数，代码如下：

Page({
    data: {
        qrcodeWidth: qrcodeWidth,
    },
    onLoad: function (options) {
        qrcode = new QRCode('canvas', {
            text: "https://github.com/tomfriwel/weapp - qrcode",
            image: '/images/bg.jpg', // 可选背景图路径
            width: qrcodeWidth,
            height: qrcodeWidth,
            colorDark: "#1CA4FC", // 深色模块颜色
            colorLight: "white", // 浅色模块颜色
            correctLevel: QRCode.CorrectLevel.H, // 纠错级别
        });
    },
    // 其他页面逻辑...
})

页面布局：在 wxml 中设置 canvas 的样式，通过动态绑定 qrcodeWidth 实现自适应，代码如下：

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

样式设置：wxss 中不再手动设置 canvas 的长宽，依靠上述动态计算实现不同设备的适配。

非自适应版本

1、代码参考：完整代码可查看 pages/index/index。

2、关键步骤

页面结构：在 wxml 中放置 canvas 标签，指定 canvas - id 绑定长按保存事件，代码如下：

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

引入模块：在页面 js 中引入 QRCode 模块，代码如下：

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

初始化二维码：在页面加载完成后创建 QRCode 实例，直接指定 px 单位的长宽，代码示例：

var qrcode = new QRCode('canvas', {
    text: "https://github.com/tomfriwel/weapp - qrcode",
    width: 150, // 固定宽度（px）
    height: 150, // 固定高度（px）
    colorDark: "#000000", // 深色模块颜色
    colorLight: "#ffffff", // 浅色模块颜色
    correctLevel: QRCode.CorrectLevel.H, // 纠错级别
});

样式设置：在 wxss 中设置与初始化参数一致的 canvas 长宽，代码如下：

.canvas {
    width: 150px;
    height: 150px;
    /* 其他样式..、*/
}

参数说明

动态更新二维码

若需要重新生成二维码，可调用 qrcode.makeCode('新的文本内容') 方法，传入新的待转换字符串就能完成更新。

核心流程

工具的核心逻辑由 QRCodeModel 类管理，主要负责二维码数据的处理：

• QRCodeModel 提供 addData(text) 方法用于添加待转换的文本数据，make() 方法用于生成二维码数据。

• 最终的二维码绘制操作在 QRCode 类的 makeImage() 方法中完成，该方法会将生成的二维码绘制到 canvas 上，支持通过 exportImage(callback) 方法将 canvas 内容保存为图片。

如需在微信小程序中实现二维码生成功能，可参考该工具的代码结构和使用方式，根据实际需求选择自适应或非自适应模式进行集成开发。