更新记录

1.0.0（2026-05-17） 下载此版本

• 首次发布 qrcode-x 二维码插件
• 支持 uni-app x easycom 组件使用
• 支持 Version 1-6 自动选择
• 支持 L、M、Q、H 四种二维码纠错等级
• 支持二维码矩阵生成，可自行渲染使用
• 支持 2D canvas 渲染二维码
• 支持自定义尺寸、留白、前景色和背景色
• 支持外层边框、圆角、内边距和背景样式配置
• 支持中心图标及图标背景样式配置
• 支持属性变化后自动重绘
• 提供 draw、toTempFilePath、saveToAlbum 方法

平台兼容性

uni-app(5.0)

uni-app x(5.0)

qrcode-x

轻量二维码插件，适用于 uni-app x。

当前版本支持 Version 1-6 自动选择、L/M/Q/H 纠错等级、矩阵生成和 canvas 组件渲染。

矩阵生成

import { createQrCellsWithOptions } from '@/uni_modules/qrcode-x'

const result = createQrCellsWithOptions('https://apps.apple.com/redeem?ctx=gift&code=XXXX', {
  ecc: 'L',
  minVersion: 1,
  maxVersion: 6
})
console.log(result.size)
console.log(result.cells)

result.cells 是一维数组，长度为 result.size * result.size。每个元素为：

type XGQRCodeCell = {
  dark: boolean
}

组件使用

插件提供 easycom 组件，会自动生成矩阵并渲染到 canvas：

<qrcode-x
  value="https://apps.apple.com/redeem?ctx=gift&code=XXXX"
  ecc="H"
  :size="240"
  :margin="4"
  :body-style="{
    showBorder: true,
    borderColor: '#d7e2f1',
    borderWidth: 2,
    borderRadius: 12,
    padding: 16
  }"
  icon="/static/apple.png"
  :icon-style="{
    size: 40,
    padding: 4,
    radius: 12,
    background: '#ffffff'
  }"
  foreground="#111827"
  background="#ffffff"
/>

组件属性：

• value：二维码内容，默认为空字符串。
• ecc：纠错等级，支持 L、M、Q、H，默认 M。
• size：二维码画布尺寸，单位 px，默认 240。
• margin：二维码 quiet zone 模块数，默认 4。
• bodyStyle：组件外层样式对象，可配置 showBorder、borderWidth、borderColor、borderRadius、padding、background。
• icon：中心图标图片路径，默认为空，不显示图标。
• iconStyle：中心图标样式对象，可配置 size、padding、radius、background。
• foreground：前景色，默认 #111827。
• background：背景色，默认 #ffffff。

组件会监听影响绘制结果的属性变化并自动重绘。也可以通过组件实例调用暴露方法：

• draw()
• toTempFilePath(success, fail)
• saveToAlbum()

注意

• 组件内部使用 uni.createCanvasContextAsync 和 2D canvas 渲染。
• 使用中心图标会遮挡部分码点，建议设置 ecc="H" 提高容错率；组件会把中心图标背景区域限制在二维码尺寸的 20% 以内。
• 页面侧自行渲染矩阵时需要加 quiet zone，建议至少 4 个模块宽度。
• 当前支持 Version 1-6，超长内容请先校验。