Wot UI 2.3.0 发布：二维码组件来了，Open Wot 与 wot-starter 同步更新

大家好，我是不如摸鱼去，wot-ui 的主要维护者。

Wot UI 2.3.0 正式发布啦。

这次更新的主角很明确：全新的 QRCode 二维码组件。除了生成一个能扫的二维码，它还支持 Logo、渐变色、不同码点样式、背景图和图片导出，做活动码、分享码、收款码这类页面时，不用再单独找一套二维码方案了。

同时，我们也继续补齐了 Form、Collapse、Cell 和图标相关组件的能力。更重要的是，围绕 Wot UI 的两块生态也跟上了：Open Wot 已发布 1.0.6，同步收录 2.3.0 的组件知识；wot-starter v2 也已经升级到 Wot UI 2.3.0。

组件库、AI 知识库和起手模板一起更新，这次终于不用升级完组件，再等另外两位队友慢慢跟上了。

新增 QRCode 二维码组件

先来看本次最直观的新功能：wd-qr-code。

最基础的用法只需要传入 text：

vue 复制代码

<wd-qr-code text="https://wot-ui.cn" />

如果只是这样，当然还不够。毕竟现在业务里的二维码，早就不满足于"黑白方块，能扫就行"。

2.3.0 中的 QRCode 支持：

自定义尺寸、前景色和背景色
square、dots、rounded、liquid 四种码点样式
单色或多色渐变
中心 Logo、Logo 圆角和边框
背景图片
调用 exportImage 导出二维码图片

比如做一个带 Logo 和渐变色的二维码，可以直接这样写：

vue 复制代码

<wd-qr-code
  text="https://wot-ui.cn"
  logo="https://img.yzcdn.cn/vant/cat.jpeg"
  dot-type="rounded"
  enable-gradient
  :gradient-direction="45"
  :gradient-colors="['#4f46e5', '#06b6d4', '#10b981']"
/>

需要保存或分享二维码时，可以通过组件实例导出图片：

vue 复制代码

<template>
  <wd-qr-code ref="qrCodeRef" text="https://wot-ui.cn" />
  <wd-button @click="handleExport">导出二维码</wd-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { QrCodeInstance } from '@/uni_modules/wot-ui/components/wd-qr-code/types'

const qrCodeRef = ref<QrCodeInstance>()

async function handleExport() {
  const tempFilePath = await qrCodeRef.value?.exportImage()
  console.log(tempFilePath)
}
</script>

组件基于 Canvas 渲染，并针对支付宝小程序的渲染、导出和性能问题做了适配。不过需要注意，Logo 和背景图仍然受各个平台的图片加载规则影响。使用远程图片时，记得配置下载域名，并确保图片能被 uni.getImageInfo 正常解析。

Form 支持整表禁用

表单页面经常有"查看态"和"编辑态"。以前要把一整张表单切到禁用状态，需要给每个输入组件分别传 disabled，字段一多，代码看起来就像在复制粘贴同一道选择题。

2.3.0 为 wd-form 增加了 disabled：

vue 复制代码

<wd-form :model="model" :disabled="disabled" border>
  <wd-form-item title="用户名" prop="username">
    <wd-input v-model="model.username" placeholder="请输入用户名" />
  </wd-form-item>

  <wd-form-item title="消息通知" prop="notice" value-align="left">
    <wd-switch v-model="model.notice" />
  </wd-form-item>
</wd-form>

开启后，表单内支持禁用态的 Input、Textarea、InputNumber、Switch、Radio、Checkbox、Rate、Slider、Upload 等组件会统一进入禁用状态。

wd-form-item 也支持单独设置 disabled。对于 Picker、Calendar、Cascader 这类通常由表单项点击打开的弹层组件，禁用后会拦截 FormItem 的点击入口，避免页面看起来不能编辑，点一下却还能弹出选择器。

disabled 不会影响 validate、reset 等表单方法，也不会自动禁用表单外部或插槽里的普通按钮。

本次还修复了同一个字段返回多条校验错误时，错误提示相互覆盖的问题。现在会稳定保留该字段的第一条有效提示，表单校验结果更可预期。

Collapse 支持非受控模式

之前使用 Collapse 时，即使业务并不关心当前展开了哪一项，也需要先准备一个 v-model。

2.3.0 支持非受控模式，不传 v-model 时，组件会在内部维护展开状态：

vue 复制代码

<wd-collapse>
  <wd-collapse-item title="常见问题" name="question">
    这里是问题答案。
  </wd-collapse-item>
  <wd-collapse-item title="使用说明" name="guide">
    这里是使用说明。
  </wd-collapse-item>
</wd-collapse>

如果业务需要拿到展开值，继续使用 v-model 即可；如果只是做 FAQ、说明区域或简单的内容折叠，现在少写一个状态就能完成。

这类更新看起来只是省了两行代码，但组件该自己处理的状态，就没必要每次都交给业务页面代管。能少写一点是一点，省下来的时间当然可以拿去摸鱼。

自定义图标的覆盖范围更完整了

Wot UI v2 已经支持通过 iconPrefix 和 cssIcon 接入自定义图标或 UnoCSS 图标，但之前部分内部使用了 wd-icon 的组件没有完整透传这两个配置。

2.3.0 把这块能力继续补齐，覆盖了 Avatar、Cell、Empty、FormItem、GridItem、Input、Rate、SidebarItem、SlideVerify、TabbarItem、Tag、Textarea 等组件。

例如在 Rate 中使用 UnoCSS 图标：

vue 复制代码

<wd-rate
  v-model="score"
  css-icon
  icon="i-carbon-star"
  active-icon="i-carbon-star-filled"
/>

现在自定义图标不再只停留在单独使用 wd-icon 的场景，组件内部的前缀图标、状态图标和操作图标也能保持同一套视觉语言。

Cell 的 label 插槽控制更明确

Cell 这次还补上了 label 插槽的启用配置，基于 Cell 实现的 FormItem 也会把自身是否提供 label 插槽的状态正确传递下去。

默认情况下，use-label-slot 为 true，可以继续通过插槽自定义标题下方的描述区域：

vue 复制代码

<wd-cell title="会员套餐">
  <template #label>
    <view>有效期至 2027-08-03</view>
  </template>
</wd-cell>

如果特定场景不希望使用插槽，也可以显式设置 :use-label-slot="false"，此时组件会回退到 label 属性。插槽是否参与渲染有了明确开关，在不同小程序平台下也更容易控制。

Open Wot 1.0.6 同步更新

组件 API 更新以后，AI 知识库也得及时跟上。否则你问 AI"帮我生成一个渐变二维码"，它翻遍旧数据以后告诉你"建议安装第三方插件"，那场面多少有点尴尬。

配合 Wot UI 2.3.0，Open Wot 1.0.6 已同步发布，主要完成了这几件事：

新增 Wot UI 2.3.0 的完整离线数据
将默认的 v2 数据更新到 2.3.0，并支持按 2.3 或 2.3.0 查询
收录新的 QRCode 组件及本次新增的 Props、Slots、Methods 和文档示例
保留历史版本数据，仍然可以按版本查询组件知识

如果你已经全局安装过 @wot-ui/cli，可以更新到最新版本：

bash 复制代码

npm install -g @wot-ui/cli@1.0.6

然后直接查询 2.3.0 新增的二维码组件：

bash 复制代码

wot info QRCode --version 2.3.0

使用 MCP 和 Agent Skills 的项目也建议同步更新，这样 AI 才能在生成代码前查到 2.3.0 的真实 API，而不是继续靠训练数据回忆。

wot-starter v2 已升级到 2.3.0

除了 Open Wot，wot-starter 的 v2 分支也已经把 @wot-ui/ui 升级到 ^2.3.0，并同步更新了相关依赖。

最近 wot-starter 还修复了主题状态管理和系统主题监听问题。如果你准备新开一个 uni-app 项目，可以直接使用最新版模板：

bash 复制代码

pnpm create uni my-app -t wot-starter-v2

如果你已经在使用 wot-starter，不需要重新创建项目，更新现有依赖即可：

bash 复制代码

pnpm add @wot-ui/ui@2.3.0

这里也顺便说明一下版本关系：Wot UI 本次版本号是 2.3.0，Open Wot 对应版本是 1.0.6；wot-starter 是同步升级组件库依赖，并不是把模板自身的版本号发布成 2.3.0。

如何升级到 Wot UI 2.3.0

如果项目通过 npm 依赖使用 Wot UI，可以直接执行：

bash 复制代码

pnpm add @wot-ui/ui@2.3.0

使用 npm：

bash 复制代码

npm install @wot-ui/ui@2.3.0

也可以手动修改 package.json：

json 复制代码

{
  "dependencies": {
    "@wot-ui/ui": "2.3.0"
  }
}

然后重新安装依赖：

bash 复制代码

pnpm install

本次是向前兼容的功能更新，现有项目可以直接升级。升级后如果使用自定义图标、复杂表单或二维码远程图片，建议在项目实际运行的平台上重点回归一下渲染和交互效果。

最后

Wot UI 2.3.0 不只是多了一个二维码组件。

这次更新把几条使用链路一起往前推了一步：

QRCode 补齐二维码生成、样式定制和图片导出能力
Form 支持整表禁用，并优化同字段多条错误的提示逻辑
Collapse 支持非受控模式，简单场景可以少维护一份状态
更多组件支持透传 iconPrefix 和 cssIcon
Cell 的 label 插槽控制更明确，FormItem 的插槽状态也能正确传递
Open Wot 1.0.6 与 wot-starter v2 同步跟进 2.3.0

从组件库，到 AI 能查询的知识，再到开箱即用的项目模板，这三块会继续一起维护。大家升级后如果遇到问题，欢迎到 GitHub 提 Issue，也欢迎把真实业务场景告诉我们。

毕竟组件库最好用的新功能，很多时候不是坐在会议室里想出来的，而是大家在项目里踩完坑以后一起补出来的。

Wot UI 2.3.0 发布：二维码组件来了，Open Wot 与 wot-starter 同步更新

新增 QRCode 二维码组件

Form 支持整表禁用

Collapse 支持非受控模式

自定义图标的覆盖范围更完整了

Cell 的 label 插槽控制更明确

Open Wot 1.0.6 同步更新

wot-starter v2 已升级到 2.3.0

如何升级到 Wot UI 2.3.0

最后

相关资源