更新记录

1.0.0（2025-12-29） 下载此版本

• 初始版本发布
• 纯 JavaScript 实现二维码生成算法
• 支持 Vue2 和 Vue3
• 支持自定义前景色、背景色
• 支持添加 Logo 图片
• 支持多种纠错级别（L/M/Q/H）
• 支持保存到相册
• 支持导出临时文件和 Base64
• 兼容全平台：H5、App、各类小程序

平台兼容性

uni-app(3.6.15)

w-qrcode 二维码生成器

高性能二维码生成组件，纯 JavaScript 实现，无外部依赖。

特性

• 纯 JavaScript 实现，无需任何外部依赖
• 支持 Vue2 和 Vue3
• 支持全平台：H5、App（Vue/Nvue）、微信/支付宝/百度/字节跳动/QQ 等小程序
• 支持自定义前景色、背景色
• 支持添加 Logo 图片
• 支持多种纠错级别（L/M/Q/H）
• 支持保存到相册
• 支持导出为图片

安装

将 w-qrcode 目录复制到项目的 uni_modules 目录下即可。

基本使用

<template>
  <w-qrcode value="https://example.com" />
</template>

完整示例

<template>
  <view class="container">
    <!-- 基础用法 -->
    <w-qrcode
      value="https://example.com"
      :size="200"
    />

    <!-- 自定义颜色 -->
    <w-qrcode
      value="https://example.com"
      :size="200"
      foreground="#1989fa"
      background="#f5f5f5"
    />

    <!-- 带 Logo -->
    <w-qrcode
      ref="qrcodeRef"
      value="https://example.com"
      :size="200"
      logo="/static/logo.png"
      :logo-size="50"
      :logo-radius="8"
      error-correction-level="H"
      @generated="onGenerated"
      @longpress="onLongpress"
    />

    <button @click="saveToAlbum">保存到相册</button>
  </view>
</template>

<script>
export default {
  methods: {
    onGenerated(info) {
      console.log('二维码生成成功:', info);
      // { version: 2, size: 25, errorCorrectionLevel: 'H' }
    },
    onLongpress(e) {
      console.log('长按事件');
    },
    saveToAlbum() {
      this.$refs.qrcodeRef.saveToAlbum()
        .then(res => {
          console.log('保存成功', res);
        })
        .catch(err => {
          console.error('保存失败', err);
        });
    }
  }
};
</script>

Vue3 组合式 API 示例

<template>
  <w-qrcode
    ref="qrcodeRef"
    :value="qrValue"
    :size="200"
  />
</template>

<script setup>
import { ref } from 'vue';

const qrcodeRef = ref(null);
const qrValue = ref('https://example.com');

const saveToAlbum = () => {
  qrcodeRef.value.saveToAlbum();
};
</script>

Props 属性

纠错级别说明

注意：如果需要在二维码中添加 Logo，建议使用 H 级别，以保证扫描成功率。

Events 事件

Methods 方法

通过 ref 获取组件实例后调用：

toTempFilePath 参数

this.$refs.qrcodeRef.toTempFilePath({
  fileType: 'png', // 'jpg' | 'png'
  quality: 1,      // 0-1，jpg 时有效
  destWidth: 300,  // 输出图片宽度
  destHeight: 300  // 输出图片高度
});

直接使用 JS SDK

如果只需要生成二维码数据，可以直接使用 JS SDK：

import QRCode from '@/uni_modules/w-qrcode/js_sdk/qrcode.js';

// 生成二维码数据
const result = QRCode.generate('https://example.com', {
  errorCorrectionLevel: 'M' // L/M/Q/H
});

console.log(result);
// {
//   version: 2,          // 版本号 1-40
//   size: 25,            // 矩阵尺寸
//   modules: [[...], ...], // 二维码矩阵，1表示黑色，0表示白色
//   errorCorrectionLevel: 'M'
// }

平台差异

常见问题

1. 二维码扫描不出来？

• 检查内容是否正确
• 增加纠错级别（使用 'H'）
• 减小 Logo 尺寸（不超过二维码的 30%）
• 增加二维码尺寸

2. 保存到相册失败？

• 小程序需要用户授权
• App 需要配置相册权限
• 检查图片路径是否正确

3. Logo 不显示？

• 确保图片路径正确
• 本地图片使用绝对路径
• 网络图片需要在小程序后台配置域名白名单

更新日志

1.0.0

• 初始版本发布
• 支持基础二维码生成
• 支持自定义样式
• 支持 Logo 图片
• 支持多平台