更新记录

1.0.4(2026-05-26) 下载此版本

  • uni-badge-view 修复类名拼写错误
  • uni-nav-bar 纠正类名拼写错误

1.0.3(2026-05-15) 下载此版本

  • uni-collapse 支持 content-wrap-class 定义内层容器样式

1.0.2(2026-05-12) 下载此版本

  • uni-badge-view 更新文档
  • uni-index-bar 更新文档
  • uni-number-box 移除无用依赖
  • uni-rate 修复 starClass 和 starActiveClass 设置不生效的问题
查看更多

平台兼容性

uni-app x(5.08)

Chrome Chrome插件版本 Safari Safari插件版本 Android Android插件版本 iOS iOS插件版本 鸿蒙 鸿蒙插件版本 微信小程序 微信小程序插件版本
1.0.3 1.0.3 1.0.3 1.0.3 1.0.3 1.0.3

项目介绍

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 交流群 沟通交流。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

uni-ui-x(以下简称软件)源码使用许可协议

2022年10月

本许可协议,是数字天堂(北京)网络技术有限公司(以下简称DCloud)对其所拥有著作权的“软件”,提供的使用许可协议。

您对“软件”的复制、使用、修改及分发受本许可协议的条款的约束,如您不接受本协议,则不能使用、复制、修改本软件。

授权许可范围

a) 授予您永久性的、全球性的、免费的、非独占的、不可撤销的本软件的源码使用许可,您可以使用这些源码制作自己的应用。

b) 您只能在DCloud产品体系内使用本软件及其源码。您不能将源码修改后运行在DCloud产品体系之外的环境,比如客户端脱离uni-app。

c) DCloud未向您授权商标使用许可。您在根据本软件源码制作自己的应用时,需以自己的名义发布软件,而不是以DCloud名义发布。

d) 本协议不构成代理关系。

DCloud的责任限制 “软件”在提供时不带任何明示或默示的担保。在任何情况下,DCloud不对任何人因使用“软件”而引发的任何直接或间接损失承担责任,不论因何种原因导致或者基于何种法律理论,即使其曾被建议有此种损失的可能性。

您的责任限制

a) 您需要在授权许可范围内使用软件。

b) 您在分发自己的应用时,不得侵犯DCloud商标和名誉权利。

c) 您不得进行破解、反编译、套壳等侵害DCloud知识产权的行为。您不得利用DCloud系统漏洞谋利或侵害DCloud利益,如您发现DCloud系统漏洞应第一时间通知DCloud。您不得进行攻击DCloud的服务器、网络等妨碍DCloud运营的行为。未经书面许可,您不得利用DCloud的产品进行与DCloud争夺开发者的行为。

d) 如您违反本许可协议,需承担因此给DCloud造成的损失。

本协议签订地点为中华人民共和国北京市海淀区。

根据发展,DCloud可能会对本协议进行修改。修改时,DCloud会在产品或者网页中显著的位置发布相关信息以便及时通知到用户。如果您选择继续使用本框架,即表示您同意接受这些修改。

条款结束

暂无用户评论。