更新记录

1.1.0（2026-05-16）

• 回退至1.0.7，关闭HarmonyOS的支持

1.0.9（2026-05-16）

• 重构插件目录结构以适配 DCloud「前端组件付费插件加密」规范：原 utssdk/qrcode-encoder.uts（含 makeQrcode 导出函数）迁移到 components/dida2-qrcode/ 同级目录，组件改用相对路径 ./qrcode-encoder.uts 引入；utssdk/index.uts 仅保留占位（不导出任何符号），以同时满足「插件市场发布检查要求 utssdk/ 目录存在」与「前端组件付费插件不支持混搭 utssdk 目录」两个约束
• 修复鸿蒙加密版云端编译产物缺失（.app-harmony/.encrypt/.../index.module.js ENOENT）问题：根因是 utssdk 目录混搭跨平台 UTS 代码后，鸿蒙云端加密管线静默跳过；改造后 utssdk 仅占位无逻辑，云端无平台代码可处理，不再失败
• 消除 1.0.5 版本引入的 iOS / 非 iOS 条件编译 import 路径分支，所有平台统一相对路径导入，更简洁可靠

1.0.8（2026-05-16）

• 开启HarmonyOS的支持

平台兼容性

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>

获取导出的图片

通过组件的 @qrcodeImageReady 事件接收渲染完成后的图片路径：

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

<script setup lang="uts">
  const onImageReady = (path : string) : void => {
    if (path.length > 0) {
      console.log('二维码图片路径：', path)
      // Android: path 为临时文件路径
      // iOS: path 为 data URI (data:image/png;base64,...)
      // Web: path 为 data URI
    }
  }
</script>

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

属性说明

事件

注意事项

静区与扫打率：quietZone 默认为 4 模块，符合 ISO/IEC 18004 / GB/T 18284 的最小静区要求。将静区设为 1~3 会缩小白边、使二维码模块更大，但可能影响部分扫描器的识别率。生产环境建议保持 4；展示或美观布局可适当减小。

使用示例

自定义颜色

通过 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>

自定义静区宽度

通过 quietZone 控制二维码四周的留白宽度（单位：模块数，有效范围 1～10，默认 4）：

<template>
  <!-- 默认静区（4 格），符合 ISO/IEC 18004 / GB/T 18284 标准最小值 -->
  <dida2-qrcode 
    text="https://dcloud.io" 
    size="200"
    :quietZone="4"
  />

  <!-- 紧凑模式（2 格），适合空间有限的嵌入场景 -->
  <dida2-qrcode 
    text="https://dcloud.io" 
    size="200"
    :quietZone="2"
  />

  <!-- 宽松模式（8 格），适合需要较大留白的展示场景 -->
  <dida2-qrcode 
    text="https://dcloud.io" 
    size="200"
    :quietZone="8"
  />
</template>

提示：quietZone 越小，二维码模块（黑色格子）越大，留白越少；quietZone 越大则反之。超出 [1, 10] 范围的值会被自动截断到边界值。生产环境建议保持默认值 4，以确保各类扫描器的最佳识别率。