更新记录

1.0.0（2026-04-27）

首次发布，提供完整的二维码生成能力：

• 二维码生成 — 将文本或链接转换为二维码，自动匹配最合适的 QR Code 版本
• 纠错等级 — 提供 L（7%）、M（15%）、Q（25%）、H（30%）四级可选，兼顾容错性与编码密度
• 尺寸调节 — 推荐 100/200/300/400 四档常用尺寸，适配各种页面布局
• 颜色定制 — 自由设置二维码前景色和背景色，轻松匹配品牌风格
• Logo 叠加 — 在二维码中央嵌入品牌 Logo，自动升级纠错等级至 H，扫码识别依然稳定可靠
• 图片导出 — 渲染完成后可导出为 PNG 图片，方便保存与分享
• 标准合规 — 严格遵循 ISO/IEC 18004 标准，静默区 ≥ 4 模块，扫码识别率稳定可靠

平台兼容性

uni-app(4.0)

uni-app x(4.0)

其他

dida2-qrcode

简介

Dida2 二维码生成器是一款 uni-app x 原生二维码组件，基于 UTS 语言开发，采用纯算法实现 QR Code 编码与 Canvas 渲染。无需任何三方依赖，支持自定义尺寸、前景/背景颜色、纠错等级以及 Logo 叠加，并可将生成的二维码导出为 PNG 图片，轻松集成到你的项目中。

功能特色

• 纯 UTS 实现 — QR Code 编码算法完全由 UTS 编写，不含三方依赖，轻量高效
• 自定义颜色 — 自由设置二维码前景色与背景色，匹配品牌或 UI 风格
• 尺寸灵活 — 支持多种尺寸规格，适配不同页面布局
• 多级纠错 — 提供 L/M/Q/H 四级纠错等级，在容错与密度之间灵活取舍
• Logo 叠加 — 在二维码中央嵌入品牌 Logo，自动升级纠错等级至 H，扫码依然稳定
• 图片导出 — Canvas 渲染完成后可导出 PNG 图片，便于保存与分享
• 设备适配 — 自动适配设备像素比（DPR），确保在不同屏幕上清晰锐利

快速上手

使用组件

在你的 .uvue 页面中直接使用即可，无需额外注册：

<template>
  <view>
    <dida2-qrcode 
      text="https://dcloud.io" 
      size="200"
    />
  </view>
</template>

获取导出的图片

引入 sharedState 共享模块并注册回调，即可接收组件渲染完成后的图片路径（base64 或本地临时路径）：

import { sharedState } from '@/uni_modules/dida2-qrcode/utssdk/shared-state.uts'

sharedState.onQrcodeImageReady = (path : string) : void => {
  if (path.length > 0) {
    console.log('二维码图片路径：', path)
    // 在此处理图片，例如上传服务器、保存相册等
  }
}

图片会在二维码（含 Logo）渲染完成后自动回调，无需手动触发。

属性说明

使用示例

自定义颜色

通过 fgColor 和 bgColor 匹配品牌色系：

<template>
  <dida2-qrcode 
    text="https://example.com" 
    size="300"
    fgColor="#1E90FF"
    bgColor="#F0F8FF"
  />
</template>

带 Logo 的二维码

设置 logo 属性在二维码中央嵌入品牌图标。组件会自动将纠错等级升级至 H（30%），确保 Logo 遮盖区域不影响扫码：

<template>
  <dida2-qrcode 
    text="https://example.com" 
    size="300"
    fgColor="#333333"
    logo="/static/logo.png"
  />
</template>

提示：Logo 支持 uni.chooseImage() 返回的临时路径，也支持项目 static 目录下的静态资源。

高纠错等级

对于长链接或对容错要求较高的场景，可手动指定 H 级纠错：

<template>
  <dida2-qrcode 
    text="https://example.com/path/to/resource?param=value" 
    size="300"
    errorCorrectionLevel="H"
    fgColor="#333333"
  />
</template>

小尺寸二维码

紧凑型布局推荐使用 100px：

<template>
  <dida2-qrcode 
    text="https://dcloud.io" 
    size="100"
    fgColor="#000000"
  />
</template>