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

2026-02-05 05:49:46作者：彭桢灵Jeremy

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: '保存成功' });
      }
    });
  }
})