微信小程序二维码生成库 weapp-qrcode 完整使用指南

weapp-qrcode 是一个专为微信小程序设计的二维码生成库，基于 davidshimjs/qrcodejs 改造而来，完全适配小程序环境。该库提供了简单易用的API，支持自定义样式、自适应布局和图片保存功能。

项目结构解析

weapp-qrcode 项目采用清晰的组织结构：

• 核心模块：utils/weapp-qrcode.js 包含二维码生成的核心逻辑
• 示例页面：pages/ 目录下提供多种使用场景的示例
• 组件集成：components/myComponent/ 展示如何在自定义组件中使用
• 资源文件：images/ 包含示例图片资源

快速开始

基础用法

在页面中引入并初始化二维码生成器：

// 引入二维码库
var QRCode = require('../../utils/weapp-qrcode.js')
var qrcode;

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

在对应的 WXML 文件中添加 canvas 组件：

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

自适应布局

针对不同屏幕尺寸的设备，weapp-qrcode 支持自适应布局：

const W = wx.getSystemInfoSync().windowWidth;
const rate = 750.0 / W;
const code_w = 300 / rate;

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

对应的 WXML 文件需要动态设置 canvas 尺寸：

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

核心功能详解

二维码生成配置参数

weapp-qrcode 提供丰富的配置选项：

• text：需要转换为二维码的文本内容
• width/height：二维码的宽度和高度（单位：px）
• colorDark：深色模块的颜色
• colorLight：浅色模块的颜色
• correctLevel：纠错级别（L/M/Q/H）
• padding：内边距设置
• image：背景图片路径
• callback：生成完成后的回调函数

动态更新二维码内容

使用 makeCode() 方法可以动态更新二维码内容：

qrcode.makeCode('新的文本内容')

自定义组件中使用

在自定义组件中使用时，需要设置 usingIn 参数：

Component({
    ready: function() {
        qrcode = new QRCode('canvas', {
            usingIn: this,
            text: "https://github.com/tomfriwel/weapp-qrcode",
            width: 150,
            height: 150,
            colorDark: "#1CA4FC",
            colorLight: "white",
            correctLevel: QRCode.CorrectLevel.H,
        });
    }
})

高级功能

图片保存功能

weapp-qrcode 支持将生成的二维码保存到相册：

save: function () {
    wx.showActionSheet({
        itemList: ['保存图片'],
        success: function (res) {
            if (res.tapIndex == 0) {
                qrcode.exportImage(function (path) {
                    wx.saveImageToPhotosAlbum({
                        filePath: path,
                    })
                })
            }
        }
    })
}

样式配置技巧

自定义颜色方案

通过设置 colorDark 和 colorLight 参数，可以创建个性化的二维码：

// 蓝色主题
colorDark: "#1CA4FC",
colorLight: "#F0F8FF",

// 红色主题  
colorDark: "#FF6B6B",
colorLight: "#FFF5F5",

添加背景图片

可以在二维码上叠加背景图片：

image: '/images/bg.jpg'

常见问题解决

生成失败排查

1. 检查 canvas-id 是否与初始化时一致
2. 确认文本内容长度在限制范围内
3. 验证图片路径是否正确

显示异常处理

1. 确保 canvas 组件层级设置正确
2. 确认容器尺寸与二维码尺寸匹配
3. 检查网络图片是否加载成功

性能优化建议

1. 合理设置二维码尺寸，避免过大影响渲染性能
2. 适时销毁 canvas 实例，释放内存资源
3. 使用缓存机制，避免重复生成相同内容

通过本指南，你可以快速掌握 weapp-qrcode 的核心用法，为你的微信小程序添加专业的二维码生成功能。