如何在微信小程序中快速生成二维码？weapp-qrcode 完整指南 🚀

weapp-qrcode 是一个专为微信小程序设计的高效二维码生成工具，基于 JavaScript 开发，无需依赖外部服务即可在小程序内快速生成高质量二维码。本文将带你从零开始，通过简单几步实现二维码功能，并提供多框架适配方案。

📚 项目核心特性与技术解析

为什么选择 weapp-qrcode？

• 纯前端生成：无需后端接口，保护用户数据隐私
• 轻量高效：核心文件仅 9KB，生成速度快至 100ms
• 多框架支持：完美适配原生微信小程序、mpvue、Taro 和 WePY
• 高度可定制：支持尺寸调整、容错级别设置和颜色自定义

关键技术架构

项目核心基于 JavaScript 实现 QRCode 编码算法，通过微信小程序的 canvas 组件进行绘制。核心代码位于 src/qrcode.js，封装了完整的 QR 码生成逻辑，包括：

• 数据编码与纠错处理
• 矩阵图案生成
• Canvas 绘制适配

🚀 5 分钟快速上手

准备工作

确保已安装：

• 微信开发者工具（最新稳定版）
• 基础小程序项目框架（原生/mpvue/Taro/WePY 均可）

安装步骤

1. 获取源码

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

2. 引入核心文件

将 examples/wechat-app/utils/weapp.qrcode.js 复制到你的项目 utils 目录下。项目结构示例：

your-project/
├── utils/
│   └── weapp.qrcode.js  # 二维码核心库
├── pages/
│   └── index/           # 你的页面

3. 添加 Canvas 组件

在页面的 .wxml 文件中添加绘制容器：

<canvas 
  style="width: 200px; height: 200px;" 
  canvas-id="qrCanvas"
  class="qrcode"
></canvas>

4. 调用生成方法

在页面的 .js 文件中引入并使用：

import drawQrcode from '../../utils/weapp.qrcode.js';

Page({
  onLoad() {
    // 生成二维码
    drawQrcode({
      width: 200,          // 二维码宽度（px）
      height: 200,         // 二维码高度（px）
      canvasId: 'qrCanvas',// 对应canvas-id
      text: 'https://example.com', // 要编码的内容
      errorCorrectLevel: 'H' // 纠错等级（L/M/Q/H）
    });
  }
})

5. 效果预览

图：weapp-qrcode 生成的二维码示例，包含示例链接和logo位置

🛠️ 高级配置与定制

自定义二维码样式

drawQrcode({
  width: 240,
  height: 240,
  canvasId: 'customQr',
  text: '自定义样式示例',
  // 背景色（默认白色）
  backgroundColor: '#f0f0f0',
  // 前景色（默认黑色）
  foregroundColor: '#333333',
  // 边距
  margin: 10,
  // 回调函数
  success(res) {
    console.log('二维码生成成功', res);
  }
})

不同框架的适配方案

mpvue 框架

示例代码位于 examples/mpvue-demo/src/pages/index/index.vue：

<template>
  <canvas canvas-id="qrCanvas" style="width: 200px; height: 200px;"></canvas>
</template>

<script>
import drawQrcode from '../../utils/weapp.qrcode.js';

export default {
  mounted() {
    drawQrcode({
      canvasId: 'qrCanvas',
      text: 'mpvue框架适配',
      width: 200,
      height: 200
    });
  }
}
</script>

Taro 框架

示例项目结构：examples/taro-demo/src/pages/index/index.js

import Taro from '@tarojs/taro';
import drawQrcode from '../../utils/weapp.qrcode.js';

export default {
  onReady() {
    const query = Taro.createSelectorQuery();
    query.select('#qrCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node;
        drawQrcode({
          canvas,
          text: 'Taro框架适配',
          width: 200,
          height: 200
        });
      });
  }
}

❓ 常见问题解决

1. 二维码生成模糊怎么办？

• 确保 Canvas 尺寸与样式尺寸一致
• 使用设备像素比（dpr）进行适配：

const dpr = wx.getSystemInfoSync().pixelRatio;
drawQrcode({
  width: 200 * dpr,
  height: 200 * dpr,
  // 其他参数...
})

2. 如何保存生成的二维码？

wx.canvasToTempFilePath({
  canvasId: 'qrCanvas',
  success(res) {
    // res.tempFilePath 为生成的临时文件路径
    wx.saveImageToPhotosAlbum({
      filePath: res.tempFilePath,
      success() {
        wx.showToast({ title: '保存成功' });
      }
    });
  }
})

3. 支持的最大内容长度是多少？

取决于选择的纠错等级：

• L级（7%纠错）：约 7089 个数字或 4296 个字母
• M级（15%纠错）：约 5596 个数字或 3391 个字母
• Q级（25%纠错）：约 3993 个数字或 2420 个字母
• H级（30%纠错）：约 3057 个数字或 1852 个字母

📁 项目目录结构

核心文件说明：

• src/qrcode.js：二维码生成核心算法
• examples/wechat-app/：原生微信小程序示例
• examples/mpvue-demo/：mpvue 框架示例
• examples/taro-demo/：Taro 框架示例
• examples/wepy-demo/：WePY 框架示例

🎯 总结

weapp-qrcode 凭借其轻量、高效和易集成的特点，成为微信小程序开发中二维码功能的首选解决方案。无论是简单的链接编码还是复杂的样式定制，都能满足你的需求。通过本文介绍的方法，你可以在几分钟内为小程序添加专业的二维码功能。

如果在使用过程中遇到问题，可以查阅项目中的示例代码或提交 issue 获取帮助。祝你的小程序开发之旅顺利！ 🎉