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

weapp-qrcode 是一款专为微信小程序量身定制的二维码生成库，基于 davidshimjs/qrcodejs 改造而来，完全适配小程序开发环境。该库提供了简单易用的API，支持自定义样式、自适应布局和图片保存功能，让开发者能够轻松实现小程序二维码制作功能。

项目结构解析

weapp-qrcode 项目采用清晰的组织结构，便于开发者理解和集成：

• 核心模块：utils/weapp-qrcode.js 包含二维码生成的核心逻辑和算法实现
• 示例页面：pages/index/ 提供基础使用场景的完整案例
• 响应式页面：pages/responsive/ 展示自适应布局的实现方法
• 组件集成：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 qrcode_w = 300 / rate;

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

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

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

核心功能详解

二维码生成配置参数

weapp-qrcode 提供丰富的配置选项，满足不同场景的需求：

• text：需要转换为二维码的文本内容，支持URL链接、文本信息等
• width/height：二维码的宽度和高度，单位为像素
• 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配置：确认canvas-id与初始化时使用的id一致
2. 验证文本内容：确保文本内容长度在二维码的容量限制范围内
3. 权限设置确认：验证小程序是否具有相应的图片保存权限

显示异常解决方案

1. 容器尺寸匹配：确保canvas容器尺寸与二维码尺寸设置一致
2. 图片资源加载：确认背景图片路径正确且资源可用
3. 网络环境检查：确保网络连接正常，特别是使用网络图片时

性能优化建议

1. 合理设置尺寸：避免二维码尺寸过大影响渲染性能
2. 适时释放资源：及时销毁不必要的canvas实例，释放内存资源
3. 缓存机制应用：对于重复生成相同内容的情况，使用缓存机制减少生成开销

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