项目介绍

uni-ui x，是DCloud为 uni-app x 提供的扩展组件库。开源库地址

uni-ui x 是全新设计的，与为uni-app做的uni-ui不同。

uni-ui x 是伴随着HBuilderX 5.08发版的。5.07版本上有部分组件在部分平台有兼容性问题，详见组件详情的兼容性表格。再往前的HBuilderX版本未测试。

特点

• 性能

uni-ui x 非常注重性能，在DOM层级控制、包体积、代码执行时间方面精益求精。

它了解 uni-app x 蒸汽模式的最佳实践，尽可能利用模板和样式的预编译特性来提升性能。当然它也支持非蒸汽模式。

• 合理的抽象

一个组件的抽象能力非常重要，如何在自定义性、易用性、性能之间尽可能三全其美。

很多组件为了满足使用者的需求，封装的属性越来越多，但组件使用者仍然在抱怨自定义性不足。

尤其是组件把样式封装在组件属性上，造成用户需要自定义样式时无限封装属性，并且这些属性的控制无法使用css变量。

uni-ui x 提供了完全的样式自定义能力，所有的样式定义都可以通过class设置，组件属性只控制功能逻辑。

• 组件的根节点样式，可以在使用组件时的组件class或style上设置。
• 组件的子节点样式，可以通过externalClass设置样式。子组件开放自己的样式出来，外部可通过externalClass进行子组件的样式自定义。

组件使用者完全可以通过css自己控制所有样式。无需修改组件源码。加上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-collapse | 折叠面板 | | uni-drag-cell | 可拖拽排序组件 | | uni-fab-button | uni-fab-button | | uni-index-bar | uni-index-bar | | uni-link | 链接 | | uni-nav-bar | uni-nav-bar | | uni-number-box | 数字输入框 | | uni-rate | 评分 | | uni-refresh-box | uni-refresh-box | | uni-tab | 选项卡 | | uni-time-format | 时间格式化 |

uni-ui的升级建议@uniuiupgrade

为uni-app提供的uni-ui，升级到uni-app x时无法直接对照升级，因为组件名称、用法都有变化。

但升级时，老版uni-ui组件在uni-app x下同等功能的新组件是什么，这里说明下功能映射关系：

|uni-ui组件 |中文名称 |在uni-app x下的方案 | |-- |-- |-- | |uni-badge |数字角标 |改用uni-badge-view | |uni-calendar |日历 |见hello uni-app x里的模板中的日历页面 | |uni-card |卡片 |无 | |uni-collapse |折叠面板 |改用uni-collapse | |uni-combox |组合框 |无 | |uni-countdown |倒计时 |无 | |uni-data-checkbox |数据选择器 |无 | |uni-data-picker |数据驱动的picker选择器 |组件本身支持uni-app x | |uni-dateformat |日期格式化 |改用uni-time-format | |uni-datetime-picker |日期选择器 |内置组件picker支持mode=date | |uni-drawer |抽屉 |改用内置组件page-container | |uni-easyinput |增强输入框 |无 | |uni-fab |悬浮按钮 |改用uni-fab-button | |uni-fav |收藏按钮 |无 | |uni-file-picker |文件选择上传 |无 | |uni-forms |表单 |改用内置组件form | |uni-goods-nav |商品导航 |无 | |uni-grid |宫格 |无 | |uni-group |分组 |无 | |uni-icons |图标 |无 | |uni-indexed-list |索引列表 |改用uni-index-bar | |uni-link |超链接 |改用uni-link | |uni-list |列表 |使用内置组件list | |uni-load-more |加载更多 |使用内置组件loading | |uni-nav-bar |自定义导航栏 |改用uni-nav-bar | |uni-notice-bar |通告栏 |无 | |uni-number-box |数字输入框 |改用uni-number-box | |uni-pagination |分页器 |无 | |uni-popup |弹出层 |改用内置组件page-container | |uni-rate |评分 |改用uni-rate | |uni-row |布局-行 |无 | |uni-search-bar |搜索栏 |无 | |uni-segmented-control|分段器 |无 | |uni-steps |步骤条 |无 | |uni-swipe-action |滑动操作 |参考hello uni-app x模板中可左滑删除长列表示例 | |uni-swiper-dot |轮播图指示点 |改用内置组件swiper，通过externalClass控制指示点样式 | |uni-table |表格 |推荐使用rich-text或web-view中的table。 | |uni-tag |标签 |无 | |uni-title |章节标题 |无 | |uni-transition |过渡动画 |无 |

标记为无的，大多比较简单，对于AI而言直接写相关UI比下载学习一个组件更合适。

交流群

有关 uni-ui-x 组件的任何意见或建议，欢迎通过 uni-ui-x im 交流群 沟通交流。