更新记录

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

1.0.0 (2025-12-22)

• 首次发布
• 支持 27 个配置属性，覆盖基础配置、码点、码眼、Logo、背景等
• 支持 8 种码点形状：方形、圆点、圆角、液化等
• 支持渐变色（线性/径向）和前景图填充
• 支持 Logo 配置：形状、尺寸、边距、阴影
• 支持透明背景
• 提供 5 个公开方法：generate、save、getImage、refresh、clear
• 预览模式与导出模式分离，优化性能
• 兼容 Vue 2 和 Vue 3

平台兼容性

uni-app(3.6.15)

uni-app x

其他

tri-qrcode 二维码生成组件

📖 组件介绍

tri-qrcode 是一个功能强大、高度可定制的 uni-app 二维码生成组件。基于 EasyQrcode 设计，兼容 qrcode 库标准，支持丰富的样式配置，包括渐变色、Logo、前景图填充、多种码点形状等高级功能。

✨ 特性

• 🎨 丰富的样式配置 - 支持单色、渐变、前景图填充
• 🖼️ Logo支持 - 支持中心Logo，可配置形状、尺寸、边距、阴影
• 🔲 多种形状 - 8种码点形状，4种码眼形状，包含液化风格
• 🌈 渐变效果 - 支持线性和径向渐变，4种渐变方向
• 📐 灵活配置 - 支持容错率、版本号、外边距等基础配置
• 🎯 高性能 - 预览模式和导出模式分离，支持防抖优化
• 🔧 易于使用 - 符合 uni-app 组件规范，支持 Vue 3

🚀 快速开始

基础使用

<template>
  <view>
    <tri-qrcode
      text="https://github.com"
      :width="450"
      :height="450"
    />
  </view>
</template>

<script setup>
import TriQrcode from '@/components/tri-qrcode/tri-qrcode.vue'
</script>

带Logo的二维码

<template>
  <tri-qrcode
    text="https://github.com"
    logo-image="/static/logo.png"
    logo-size="medium"
    logo-shape="circle"
    error-correction-level="H"
  />
</template>

渐变色二维码

<template>
  <tri-qrcode
    text="https://github.com"
    :dots-gradient="{
      type: 'linear',
      direction: 'diagonal',
      colorStops: [
        { offset: 0, color: '#667eea' },
        { offset: 1, color: '#764ba2' }
      ]
    }"
  />
</template>

📋 API 文档

Props

🔹 基础配置

🔹 二维码选项

🔹 Logo选项

🔹 码点选项

🔹 码眼外框选项

🔹 码眼内点选项

🔹 背景选项

🔹 渲染选项

Events

事件使用示例

<template>
  <tri-qrcode
    text="https://github.com"
    @rendered="onRendered"
    @error="onError"
  />
</template>

<script setup>
const onRendered = ({ config, renderTime }) => {
  console.log('二维码生成完成', `耗时: ${renderTime}ms`)
}

const onError = ({ error }) => {
  console.error('生成失败', error.message)
}
</script>

Methods

通过 ref 可以调用组件的方法：

方法使用示例

<template>
  <view>
    <tri-qrcode ref="qrcodeRef" text="https://github.com" />
    <button @click="handleSave">保存二维码</button>
    <button @click="handleRefresh">刷新</button>
  </view>
</template>

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

const qrcodeRef = ref(null)

const handleSave = async () => {
  try {
    const filePath = await qrcodeRef.value.save()
    uni.showToast({ title: '保存成功', icon: 'success' })
  } catch (error) {
    uni.showToast({ title: '保存失败', icon: 'error' })
  }
}

const handleRefresh = () => {
  qrcodeRef.value.refresh()
}
</script>

🎨 渐变配置

渐变配置对象用于 dots-gradient、corners-square-gradient、corners-dot-gradient、background-gradient 等属性。

渐变配置参数

colorStops 颜色停靠点

完整格式示例

{
  type: 'linear',           // 渐变类型：'linear' 或 'radial'
  direction: 'diagonal',    // 渐变方向
  colorStops: [             // 颜色停靠点数组（至少2个）
    { offset: 0, color: '#667eea' },
    { offset: 0.5, color: '#764ba2' },  // 可选的中间色
    { offset: 1, color: '#f093fb' }
  ]
}

渐变类型说明

• linear（线性渐变）：颜色沿直线方向过渡
• radial（径向渐变）：颜色从中心向外辐射过渡

渐变方向说明

渐变示例

线性渐变 - 水平

<tri-qrcode
  text="Hello"
  :dots-gradient="{
    type: 'linear',
    direction: 'horizontal',
    colorStops: [
      { offset: 0, color: '#667eea' },
      { offset: 1, color: '#764ba2' }
    ]
  }"
/>

径向渐变 - 中心

<tri-qrcode
  text="Hello"
  :dots-gradient="{
    type: 'radial',
    direction: 'center',
    colorStops: [
      { offset: 0, color: '#f093fb' },
      { offset: 1, color: '#4facfe' }
    ]
  }"
/>

多色渐变

<tri-qrcode
  text="Hello"
  :dots-gradient="{
    type: 'linear',
    direction: 'diagonal',
    colorStops: [
      { offset: 0, color: '#ff6b6b' },
      { offset: 0.5, color: '#feca57' },
      { offset: 1, color: '#48dbfb' }
    ]
  }"
/>

💡 使用示例

示例1：简约风格

<tri-qrcode
  text="https://example.com"
  :width="400"
  :height="400"
  dots-type="rounded"
  dots-color="#2c3e50"
  background-color="#ecf0f1"
/>

示例2：渐变风格 + Logo

<tri-qrcode
  text="https://example.com"
  logo-image="/static/logo.png"
  logo-size="medium"
  logo-shape="circle"
  logo-shadow
  error-correction-level="H"
  :dots-gradient="{
    type: 'linear',
    direction: 'diagonal',
    colorStops: [
      { offset: 0, color: '#667eea' },
      { offset: 1, color: '#764ba2' }
    ]
  }"
/>

示例3：前景图填充

<tri-qrcode
  text="https://example.com"
  dots-image="/static/pattern.png"
  dots-type="rounded"
  background-color="#ffffff"
/>

示例4：透明背景

<tri-qrcode
  text="https://example.com"
  :background-transparent="true"
  dots-color="#000000"
/>

示例5：液化风格

<tri-qrcode
  text="https://example.com"
  dots-type="fluid"
  corners-square-type="extra-rounded"
  corners-dot-type="dot"
  :dots-gradient="{
    type: 'radial',
    direction: 'center',
    colorStops: [
      { offset: 0, color: '#fa709a' },
      { offset: 1, color: '#fee140' }
    ]
  }"
/>

示例6：完整配置

<template>
  <view class="container">
    <tri-qrcode
      ref="qrcodeRef"
      text="https://github.com"
      :width="450"
      :height="450"
      :margin="2"
      version="0"
      error-correction-level="H"
      mode="Byte"

      logo-image="/static/logo.png"
      logo-size="medium"
      logo-shape="rounded-rectangle"
      logo-margin="small"
      :logo-shadow="true"
      :hide-background-dots="true"

      dots-type="rounded"
      :dots-gradient="{
        type: 'linear',
        direction: 'diagonal',
        colorStops: [
          { offset: 0, color: '#667eea' },
          { offset: 1, color: '#764ba2' }
        ]
      }"

      corners-square-type="extra-rounded"
      corners-square-color="#667eea"

      corners-dot-type="dot"
      corners-dot-color="#764ba2"

      background-color="#ffffff"

      :preview-mode="true"

      @rendered="onRendered"
      @error="onError"
    />

    <view class="actions">
      <button @click="handleSave">保存到相册</button>
      <button @click="handleRefresh">刷新</button>
    </view>
  </view>
</template>

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

const qrcodeRef = ref(null)

const onRendered = ({ renderTime }) => {
  console.log(`二维码生成完成，耗时: ${renderTime}ms`)
}

const onError = ({ error }) => {
  console.error('生成失败:', error.message)
}

const handleSave = async () => {
  try {
    const filePath = await qrcodeRef.value.save()
    uni.showToast({ title: '保存成功', icon: 'success' })
  } catch (error) {
    uni.showToast({ title: '保存失败', icon: 'error' })
  }
}

const handleRefresh = () => {
  qrcodeRef.value.refresh()
}
</script>

<style scoped>
.container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.actions {
  margin-top: 40rpx;
  display: flex;
  gap: 20rpx;
}
</style>

⚠️ 注意事项

1. 颜色配置互斥

每个部分（码点、码眼、背景）的颜色配置是互斥的：

• 使用单色时，不要同时设置渐变或前景图
• 使用渐变时，不要同时设置单色或前景图
• 使用前景图时，不要同时设置单色或渐变

2. Logo与容错率

• 使用Logo时，建议将容错率设置为 H 或 Q
• Logo尺寸越大，需要的容错率越高
• 开启 hide-background-dots 后，需要更高的容错率

3. 性能优化

• 预览时使用 preview-mode="true"（默认），性能更好
• 导出高质量图片时使用 preview-mode="false"
• 组件内置防抖机制，频繁更新配置不会影响性能

4. 图片路径

• Logo和前景图支持本地路径、网络URL、base64
• 本地路径示例：/static/logo.png
• 网络URL示例：https://example.com/logo.png
• base64示例：data:image/png;base64,...

5. 渐变方向

• linear 类型支持 horizontal、vertical、diagonal 方向
• radial 类型仅支持 center 方向

6. 多个二维码组件

• 如果页面中使用多个二维码组件，请确保每个组件有唯一的 canvas-id
• 或者不设置 canvas-id，让组件自动生成（推荐）