uni-app x 扩展组件库 uni-ui x 完全指南设计理念、组件体系与 uni-ui 升级迁移【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-appuni-ui x 是 DCloud 专为 uni-app x 全新设计的扩展组件库与早期为 uni-app 打造的 uni-ui 在架构、编程范式与设计理念上完全不同。本文以官方组件库文档为主体结合仓库内的真实组件实现与示例工程系统讲解 uni-ui x 的设计理念、完整组件清单、externalClass 样式开放机制并给出从老版 uni-ui 平替升级到 uni-ui x 的逐组件映射表帮助开发者在新一代 uni-app x 项目中快速选型、定制与迁移。uni-ui x 是什么与 uni-ui 的定位差异uni-ui x 是 DCloud 为 uni-app x 提供的扩展组件库它是一个全新设计的组件体系与为 uni-app 做的 uni-ui 不同——组件名称、编程范式、样式机制均有变化不能直接照搬使用。几个关键事实依据 组件库总览文档获取方式既可以下载包含全部组件的套装也可以按需单独下载每个组件每个组件的独立文档中均包含该组件的下载入口。发布节奏uni-ui x 是伴随 HBuilderX 5.08 发版的。5.07 版本上部分组件在部分平台存在兼容性问题详见各组件文档中的兼容性表格5.07 以前的 HBuilderX 版本未经过测试不建议使用。样式隔离策略要求uni-ui x 仅支持样式隔离策略 2.0。如果项目创建于 5.0 以前老项目需要在manifest.json中手动开启该策略否则组件样式行为可能不符合预期。仓库中的实现本仓库src/uni_modules/目录下携带了 uni-rate、uni-nav-bar 等组件的可运行源码可以直接阅读学习其实现方式。设计理念五个关键词uni-ui x 在设计上有五个明确的取向理解它们有助于正确使用和二次定制组件。性能优先uni-ui x 非常注重性能在DOM 层级控制、包体积、代码执行时间三个方面精益求精它了解 uni-app x 蒸汽模式vapor mode的最佳实践尽可能利用模板和样式的预编译特性提升性能蒸汽模式的整体介绍可参考 docs/app-vapor.md同时它也兼容非蒸汽模式未使用蒸汽模式的项目同样可以接入。合理的抽象一个组件的抽象能力非常重要——如何在自定义性、易用性、性能之间尽可能三全其美。很多组件库为满足需求不断堆砌属性但使用者仍然抱怨自定义性不足尤其是把样式封装在组件属性上时用户自定义样式需要无限叠加属性且这些属性无法使用 CSS 变量控制。uni-ui x 的解法是组件属性只控制功能逻辑所有样式定义都通过 class 设置提供完全的样式自定义能力组件根节点样式直接在使用组件处的组件 class 或 style 上设置组件子节点样式通过externalClassexternal class 机制开放。子组件把自己的内部节点样式暴露出来外部通过 externalClass 即可覆盖无需修改组件源码。配合 CSS 变量的加持样式灵活度远高于传统封装属性的组件库——使用者完全可以通过 CSS 变量自定义整套主题而不被组件属性上不能写 CSS 变量所困扰。为 AI 设计uni-ui x 优先使用代码而不是二进制文件目前没有引入任何字体文件。这既出于性能考虑也出于 AI 友好度考虑以箭头为例uni-ui x 中使用一个view配置左下边框并transform旋转来实现而不是字体图标。这种方案性能优于字体且 AI 可以直观理解这段代码的 UI 表现能够在代码层面调整样式而字体图片对 AI 而言很难理解、生成与修改再如 uni-tab 下沉 midbutton 涉及的贝塞尔曲线没有使用图片而是使用 SVG同样是为了方便 AI 理解和修改。中性的风格uni-ui x 的风格是中性的——和 uni 内置组件、小程序内置组件一样它重视的是开发者可以自定义成各种风格而不是直接为开发者提供某套既定风格。开发者可以通过自定义 CSS 形成自己的风格也可以交给 AI 完成类似工作。没有写死的颜色和文字没有写死的文字不影响国际化没有写死的颜色不影响自定义主题。uni-ui x 已支持的组件列表组件名组件说明仓库内文档uni-badge-view数字角标uni-badge-view.mduni-collapse折叠面板uni-collapse.mduni-drag-cell可拖拽排序组件uni-drag-cell.mduni-fab-button悬浮按钮uni-fab-button.mduni-index-bar索引栏uni-index-bar.mduni-link链接uni-link.mduni-nav-bar自定义导航栏uni-nav-bar.mduni-number-box数字输入框uni-number-box.mduni-rate评分uni-rate.mduni-refresh-box下拉刷新容器uni-refresh-box.mduni-tab选项卡uni-tab.mduni-time-format时间格式化uni-time-format.md各组件均可独立下载也可以直接查看本仓库 src/uni_modules 下对应的实现源码如 uni-rate、uni-nav-bar以及示例工程 examples/hello-uvue、examples/hello-uts。从源码看设计如何落地uni-rate双层叠加的高性能评分组件uni-rate 组件文档 说明该组件支持两个版本通过full属性切换高性能版本full为 false只有一层不显示灰星仅显示亮星亮星不支持小数点、不能点击适于长列表中显示普通版本full为 true由背景灰星和前景亮星叠加而成支持小数、支持点击。查看 uni-rate.uvue 源码 可以看到完整实现逻辑星星使用 Unicode 字符★/☆渲染通过修改字体样式实现各种效果完全印证为 AI 设计、无字体文件的理念高性能模式只有一个text节点stars由 computed 计算★.repeat(Math.round(value))值域被限制在 0~5普通模式采用两层叠加底层灰星gray-stars颜色#ccc 前景亮星active-color颜色#ffca3e前景层通过width: (rate / 5) * 100%的裁剪实现小数评分显示点击事件通过clickX / containerWidth * 5计算评分随后触发change与update:modelValue事件从而支持v-model双向绑定各样式层分别开放starClass/starStyle灰星与starActiveClass/starActiveStyle亮星供外部覆盖属性只承担功能职责如readonly、plain。属性的详细类型说明可在 uni-rate.md 与 UTS>.uni-row { flex-direction: row; } .uni-h1 { font-size: 28px; font-weight: bold; border-bottom: 1px solid #ccc; margin: 8px 0; } .uni-h2 { font-size: 24px; font-weight: bold; border-bottom: 1px solid #ccc; margin: 8px 0; } .uni-h3 { font-size: 20px; font-weight: bold; margin: 8px 0; } .uni-h4 { font-weight: bold; margin: 8px 0; }使用建议与注意事项版本前提确保 HBuilderX 版本不低于 5.085.07 上部分组件存在平台兼容性问题详见各组件文档的兼容性表格部分组件还有更高版本要求例如 uni-collapse 在 Android 上需 HBuilderX 5.09低版本上箭头变色 旋转时在 Android 上会消失。样式隔离策略 2.0uni-ui x 仅支持样式隔离策略 2.05.0 以前创建的老项目需要在manifest.json中手动开启。样式自定义优先走 class组件属性只控制功能逻辑根节点样式写在组件 class/style 上子节点样式通过各组件开放的 externalClass 覆盖主题定制优先使用 CSS 变量。示例工程各组件文档中的完整演示页面如 uni-rate、uni-badge-view、uni-collapse 的完整示例与最新 HBuilderX 版本同步可在示例工程 examples/hello-uvue、examples/hello-uts 中按pages/uni-ui/...路径找到对应.uvue页面直接运行体验。交流反馈有关 uni-ui x 组件的任何意见或建议可通过官方 uni-ui-x im 交流群沟通入口见 组件库总览文档 末尾。【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
uni-app x 扩展组件库 uni-ui x 完全指南设计理念、组件体系与 uni-ui 升级迁移【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-appuni-ui x 是 DCloud 专为 uni-app x 全新设计的扩展组件库与早期为 uni-app 打造的 uni-ui 在架构、编程范式与设计理念上完全不同。本文以官方组件库文档为主体结合仓库内的真实组件实现与示例工程系统讲解 uni-ui x 的设计理念、完整组件清单、externalClass 样式开放机制并给出从老版 uni-ui 平替升级到 uni-ui x 的逐组件映射表帮助开发者在新一代 uni-app x 项目中快速选型、定制与迁移。uni-ui x 是什么与 uni-ui 的定位差异uni-ui x 是 DCloud 为 uni-app x 提供的扩展组件库它是一个全新设计的组件体系与为 uni-app 做的 uni-ui 不同——组件名称、编程范式、样式机制均有变化不能直接照搬使用。几个关键事实依据 组件库总览文档获取方式既可以下载包含全部组件的套装也可以按需单独下载每个组件每个组件的独立文档中均包含该组件的下载入口。发布节奏uni-ui x 是伴随 HBuilderX 5.08 发版的。5.07 版本上部分组件在部分平台存在兼容性问题详见各组件文档中的兼容性表格5.07 以前的 HBuilderX 版本未经过测试不建议使用。样式隔离策略要求uni-ui x 仅支持样式隔离策略 2.0。如果项目创建于 5.0 以前老项目需要在manifest.json中手动开启该策略否则组件样式行为可能不符合预期。仓库中的实现本仓库src/uni_modules/目录下携带了 uni-rate、uni-nav-bar 等组件的可运行源码可以直接阅读学习其实现方式。设计理念五个关键词uni-ui x 在设计上有五个明确的取向理解它们有助于正确使用和二次定制组件。性能优先uni-ui x 非常注重性能在DOM 层级控制、包体积、代码执行时间三个方面精益求精它了解 uni-app x 蒸汽模式vapor mode的最佳实践尽可能利用模板和样式的预编译特性提升性能蒸汽模式的整体介绍可参考 docs/app-vapor.md同时它也兼容非蒸汽模式未使用蒸汽模式的项目同样可以接入。合理的抽象一个组件的抽象能力非常重要——如何在自定义性、易用性、性能之间尽可能三全其美。很多组件库为满足需求不断堆砌属性但使用者仍然抱怨自定义性不足尤其是把样式封装在组件属性上时用户自定义样式需要无限叠加属性且这些属性无法使用 CSS 变量控制。uni-ui x 的解法是组件属性只控制功能逻辑所有样式定义都通过 class 设置提供完全的样式自定义能力组件根节点样式直接在使用组件处的组件 class 或 style 上设置组件子节点样式通过externalClassexternal class 机制开放。子组件把自己的内部节点样式暴露出来外部通过 externalClass 即可覆盖无需修改组件源码。配合 CSS 变量的加持样式灵活度远高于传统封装属性的组件库——使用者完全可以通过 CSS 变量自定义整套主题而不被组件属性上不能写 CSS 变量所困扰。为 AI 设计uni-ui x 优先使用代码而不是二进制文件目前没有引入任何字体文件。这既出于性能考虑也出于 AI 友好度考虑以箭头为例uni-ui x 中使用一个view配置左下边框并transform旋转来实现而不是字体图标。这种方案性能优于字体且 AI 可以直观理解这段代码的 UI 表现能够在代码层面调整样式而字体图片对 AI 而言很难理解、生成与修改再如 uni-tab 下沉 midbutton 涉及的贝塞尔曲线没有使用图片而是使用 SVG同样是为了方便 AI 理解和修改。中性的风格uni-ui x 的风格是中性的——和 uni 内置组件、小程序内置组件一样它重视的是开发者可以自定义成各种风格而不是直接为开发者提供某套既定风格。开发者可以通过自定义 CSS 形成自己的风格也可以交给 AI 完成类似工作。没有写死的颜色和文字没有写死的文字不影响国际化没有写死的颜色不影响自定义主题。uni-ui x 已支持的组件列表组件名组件说明仓库内文档uni-badge-view数字角标uni-badge-view.mduni-collapse折叠面板uni-collapse.mduni-drag-cell可拖拽排序组件uni-drag-cell.mduni-fab-button悬浮按钮uni-fab-button.mduni-index-bar索引栏uni-index-bar.mduni-link链接uni-link.mduni-nav-bar自定义导航栏uni-nav-bar.mduni-number-box数字输入框uni-number-box.mduni-rate评分uni-rate.mduni-refresh-box下拉刷新容器uni-refresh-box.mduni-tab选项卡uni-tab.mduni-time-format时间格式化uni-time-format.md各组件均可独立下载也可以直接查看本仓库 src/uni_modules 下对应的实现源码如 uni-rate、uni-nav-bar以及示例工程 examples/hello-uvue、examples/hello-uts。从源码看设计如何落地uni-rate双层叠加的高性能评分组件uni-rate 组件文档 说明该组件支持两个版本通过full属性切换高性能版本full为 false只有一层不显示灰星仅显示亮星亮星不支持小数点、不能点击适于长列表中显示普通版本full为 true由背景灰星和前景亮星叠加而成支持小数、支持点击。查看 uni-rate.uvue 源码 可以看到完整实现逻辑星星使用 Unicode 字符★/☆渲染通过修改字体样式实现各种效果完全印证为 AI 设计、无字体文件的理念高性能模式只有一个text节点stars由 computed 计算★.repeat(Math.round(value))值域被限制在 0~5普通模式采用两层叠加底层灰星gray-stars颜色#ccc 前景亮星active-color颜色#ffca3e前景层通过width: (rate / 5) * 100%的裁剪实现小数评分显示点击事件通过clickX / containerWidth * 5计算评分随后触发change与update:modelValue事件从而支持v-model双向绑定各样式层分别开放starClass/starStyle灰星与starActiveClass/starActiveStyle亮星供外部覆盖属性只承担功能职责如readonly、plain。属性的详细类型说明可在 uni-rate.md 与 UTS>.uni-row { flex-direction: row; } .uni-h1 { font-size: 28px; font-weight: bold; border-bottom: 1px solid #ccc; margin: 8px 0; } .uni-h2 { font-size: 24px; font-weight: bold; border-bottom: 1px solid #ccc; margin: 8px 0; } .uni-h3 { font-size: 20px; font-weight: bold; margin: 8px 0; } .uni-h4 { font-weight: bold; margin: 8px 0; }使用建议与注意事项版本前提确保 HBuilderX 版本不低于 5.085.07 上部分组件存在平台兼容性问题详见各组件文档的兼容性表格部分组件还有更高版本要求例如 uni-collapse 在 Android 上需 HBuilderX 5.09低版本上箭头变色 旋转时在 Android 上会消失。样式隔离策略 2.0uni-ui x 仅支持样式隔离策略 2.05.0 以前创建的老项目需要在manifest.json中手动开启。样式自定义优先走 class组件属性只控制功能逻辑根节点样式写在组件 class/style 上子节点样式通过各组件开放的 externalClass 覆盖主题定制优先使用 CSS 变量。示例工程各组件文档中的完整演示页面如 uni-rate、uni-badge-view、uni-collapse 的完整示例与最新 HBuilderX 版本同步可在示例工程 examples/hello-uvue、examples/hello-uts 中按pages/uni-ui/...路径找到对应.uvue页面直接运行体验。交流反馈有关 uni-ui x 组件的任何意见或建议可通过官方 uni-ui-x im 交流群沟通入口见 组件库总览文档 末尾。【免费下载链接】uni-appA cross-platform framework using Vue.js项目地址: https://gitcode.com/gh_mirrors/un/uni-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
