3分钟上手！weapp-qrcode：微信小程序二维码生成神器，自定义样式+自适应全攻略 🚀

2026-02-05 04:09:37作者：袁立春Spencer

weapp-qrcode 是一款专为微信小程序开发者打造的二维码生成工具，基于经典二维码库优化适配小程序环境，支持自定义颜色、添加背景图、自适应屏幕尺寸等实用功能，让你3行代码即可集成高颜值二维码功能。

📸 直观感受：二维码生成效果展示

以下是项目实际运行效果截图，展示了不同样式和功能的二维码生成结果：

图1：使用自定义蓝色主题生成的二维码，适用于品牌营销场景

图2：不同内容密度下的二维码清晰度测试，左侧为复杂链接生成效果

图3：实时修改内容并重新生成二维码的动态过程

🔍 核心优势：为什么选择weapp-qrcode？

✅ 专为小程序深度优化

原生于微信小程序环境，解决了传统二维码库在小程序中无法渲染的问题，代码精简至utils/weapp-qrcode.js单个文件，无需额外依赖。

✅ 全场景自定义能力

样式定制：支持设置前景色（colorDark）、背景色（colorLight）
尺寸适配：提供rpx2px工具函数（utils/rpx2px.js）实现跨设备自适应
视觉增强：支持添加背景图片（如images/bg.jpg）、Logo图标

✅ 极简集成流程

从引入到生成仅需3个步骤，完整示例代码可参考项目中的pages/responsive/responsive目录。

🚀 快速上手：3步集成二维码功能

1️⃣ 下载项目源码

git clone https://gitcode.com/gh_mirrors/wea/weapp-qrcode

2️⃣ 基础使用（固定尺寸版）

在需要生成二维码的页面（如pages/index/index）中：

WXML布局（添加canvas容器）：

<canvas canvas-id="qrcodeCanvas" class="qrcode"></canvas>

JS逻辑（初始化二维码）：

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

Page({
  onLoad() {
    new QRCode('qrcodeCanvas', {
      text: "https://example.com",  // 二维码内容
      width: 150,                  // 宽度（px）
      height: 150,                 // 高度（px）
      colorDark: "#000000",        // 前景色
      colorLight: "#ffffff",       // 背景色
      correctLevel: QRCode.CorrectLevel.H  // 容错级别（H最高）
    })
  }
})

WXSS样式（设置画布尺寸）：

.qrcode {
  width: 150px;
  height: 150px;
  margin: 20px auto;
}

3️⃣ 高级用法：自适应屏幕尺寸

参考pages/responsive/responsive页面实现跨设备适配：

import rpx2px from '../../utils/rpx2px.js'

// 将300rpx转换为实际像素
const qrcodeWidth = rpx2px(300)

new QRCode('canvas', {
  text: "自适应尺寸二维码",
  width: qrcodeWidth,
  height: qrcodeWidth,
  image: '/images/bg.jpg',  // 添加背景图
  colorDark: "#1CA4FC"
})

📝 实战技巧：提升二维码体验的5个方法

1. 背景图功能测试

在pages/test/test页面中提供了背景图功能演示，可通过以下代码启用：

new QRCode('canvas', {
  text: "带背景的二维码",
  image: '/images/test.jpg'  // 使用项目中的测试图片
})

2. 动态更新内容

生成实例后调用makeCode方法更新二维码内容：

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

3. 优化容错率

根据内容复杂度选择容错级别：

// 高容错（30%内容可被遮挡）适用于添加Logo
correctLevel: QRCode.CorrectLevel.H

4. 自定义组件中使用

在组件（如components/myComponent）中使用时需传入上下文：

new QRCode('canvas', {
  usingIn: this,  // 组件实例对象
  text: "组件内生成的二维码"
})

5. 保存二维码图片

通过长按事件触发保存功能（参考pages/responsive/responsive中的save方法）

📌 项目结构速览

weapp-qrcode/
├── utils/                # 核心工具
│   ├── weapp-qrcode.js   # 二维码生成核心
│   └── rpx2px.js         # 尺寸适配工具
├── pages/                # 示例页面
│   ├── responsive/       # 自适应尺寸演示
│   └── test/             # 背景图功能测试
└── images/               # 素材资源
    └── bg.jpg            # 示例背景图片