一、引言

在移动应用开发领域，跨平台框架因其能够降低开发成本、提高开发效率而备受开发者青睐。其中，uni-app作为一个使用Vue.js开发所有前端应用的框架，不仅支持编译到iOS、Android、H5、以及各种小程序等多个平台，还因其丰富的组件库和插件市场，为开发者提供了极大的便利。在uni-app的生态圈中，uni-ui作为一套全端兼容、高性能的UI框架，凭借其独特的产品特点，受到了广泛的关注和应用。

二、uni-ui产品特点

1. 高性能

uni-ui在性能上表现出色，尤其在处理大数据量和高频更新数据时，其性能优势尤为明显。这主要得益于uni-ui基于Vue组件的特性，uni-app引擎底层能够自动diff更新数据，避免了手动使用setData更新数据带来的性能损耗。此外，uni-ui还通过优化逻辑层和视图层通讯折损、实现背景停止等技术手段，进一步提升了框架的性能。

1. 全端兼容

uni-ui的组件都是多端自适应的，能够自动处理不同平台之间的差异或bug。无论是小程序、App还是H5，uni-ui都能提供一致的UI体验和交互效果。这种全端兼容的特性，使得开发者能够更加专注于业务逻辑的实现，而无需过多关注不同平台之间的兼容性问题。

1. 与uni统计自动集成实现免打点

uni统计作为DCloud官方推出的多端统计平台，为开发者提供了全面的数据分析和行为监控能力。uni-ui与uni统计的自动集成，使得使用uni-ui组件的开发者能够轻松实现免打点功能，无需手动添加统计代码，即可实现对页面标题、用户行为等数据的自动收集和分析。

1. 主题扩展

uni-ui支持uni.scss，这使得开发者能够方便地切换App的风格和主题。通过修改uni.scss中的样式变量，开发者可以快速定制出符合自己需求的UI界面。此外，uni-ui还鼓励社区贡献更多的主题风格，以满足更多用户的需求。

三、技术实现

1. 自动差量更新数据

uni-ui利用Vue.js的响应式系统，实现了数据的自动差量更新。当组件的数据发生变化时，Vue.js会自动计算出需要更新的DOM节点，并通过uni-app引擎的底层机制将这些变化同步到视图层。这种机制避免了手动使用setData更新数据带来的性能损耗，同时也降低了开发者的开发难度。

1. 优化逻辑层和视图层通讯折损

为了优化逻辑层和视图层之间的通讯折损，uni-ui在需要跟手式操作的UI组件中，使用了css动画以及平台底层提供的wxs、bindingx等技术。这些技术能够降低逻辑层和视图层之间的通讯频率，提高交互的实时性和流畅性。同时，uni-ui还对这些技术进行了封装和抽象，使得开发者能够更加方便地使用这些技术来实现高性能的交互体验。

1. 背景停止

为了解决背景操作UI引发的性能问题，uni-ui实现了背景停止功能。当组件不再可见时，uni-ui会自动停止该组件的渲染和更新操作，释放硬件资源给前台界面使用。这种机制能够有效地避免背景操作UI对前台界面造成的性能影响。

四、快速开始

uni-ui支持 HBuilderX直接新建项目模板、npm安装和单独导入个别组件等多种使用方式

在HBuilderX 新建uni-app项目的模板中，选择uni-ui模板

由于uni-app独特的easycom技术，可以免引用、注册，直接使用各种符合规则的vue组件。

在代码区键入u，拉出各种内置或uni-ui的组件列表，选择其中一个，即可使用该组件。

光标放在组件名称上，按F1，可以查阅组件的文档。

通过 uni_modules 单独安装组件

如果你没有创建uni-ui项目模板，也可以在你的工程里，通过 uni_modules 单独安装需要的某个组件。下表为uni-ui的扩展组件清单，点击每个组件在详情页面可以导入组件到项目下，导入后直接使用即可，无需import和注册。

组件名	组件说明
uni-badge	数字角标
uni-calendar	日历
uni-card	卡片
uni-collapse	折叠面板
uni-combox	组合框
uni-countdown	倒计时
uni-data-checkbox	数据选择器
uni-data-picker	数据驱动的picker选择器
uni-dateformat	日期格式化
uni-datetime-picker	日期选择器
uni-drawer	抽屉
uni-easyinput	增强输入框
uni-fab	悬浮按钮
uni-fav	收藏按钮
uni-file-picker	文件选择上传
uni-forms	表单
uni-goods-nav	商品导航
uni-grid	宫格
uni-group	分组
uni-icons	图标
uni-indexed-list	索引列表
uni-link	超链接
uni-list	列表
uni-load-more	加载更多
uni-nav-bar	自定义导航栏
uni-notice-bar	通告栏
uni-number-box	数字输入框
uni-pagination	分页器
uni-popup	弹出层
uni-rate	评分
uni-row	布局-行
uni-search-bar	搜索栏
uni-segmented-control	分段器
uni-steps	步骤条
uni-swipe-action	滑动操作
uni-swiper-dot	轮播图指示点
uni-table	表格
uni-tag	标签
uni-title	章节标题
uni-transition	过渡动画

使用 uni_modules 方式安装组件库，可以直接通过插件市场导入，通过右键菜单快速更新组件，不需要引用、注册，直接在页面中使用 uni-ui 组件。点击安装 uni-ui 组件库

注意：下载最新的组件目前仅支持 uni_modules ,非 uni_modules 版本最高支持到组件的1.2.10版本

如不能升级到 uni_modules 版本，可以使用 uni_modules 安装好对应组件，将组件拷贝到对应目录。

例如需更新 uni-list和uni-badge ,将 uni_modules>uni-list>components和uni_modules>uni-badege>components下所有目录拷贝到如下目录即可：

目录示例

┌─components 组件目录
│ ├─uni-list list 列表目录
│ │ └─uni-list.vue list 组件文件
│ ├─uni-list-item list-item 列表目录
│ │ └─uni-list-item.vue list 组件文件
│ ├─uni-badge badge 角标目录
│ │ └─uni-badge.vue badge 组件文件
│ └─ //.... 更多组件文件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index示例页面
├─main.js Vue初始化入口文件
├─App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json 配置页

通过 uni_modules 导入全部组件

如果想一次把所有uni-ui组件导入到项目中，只需要导入一个 uni-ui 组件即可 点击去导入。

如果没有自动导入其他组件，可以在 uni-ui 组件目录上右键选择 安装三方插件依赖 即可。

npm安装

在 vue-cli 项目中可以使用 npm 安装 uni-ui 库 ，或者直接在 HBuilderX 项目中使用 npm 。

注意 cli 项目默认是不编译 node_modules 下的组件的，导致条件编译等功能失效 ，导致组件异常 需要在根目录创建 vue.config.js 文件 ，增加 @dcloudio/uni-ui 包的编译即可正常

// vue.config.js
module.exports = {
transpileDependencies:['@dcloudio/uni-ui']
}

准备 sass

vue-cli 项目请先安装 sass 及 sass-loader，如在 HBuliderX 中使用，可跳过此步。

• 安装 sass

  npm i sass -D 或 yarn add sass -D

• 安装 sass-loader

  npm i sass-loader@10.1.1 -D 或 yarn add sass-loader@10.1.1 -D

如果 node 版本小于 16 ，sass-loader 请使用低于 @11.0.0 的版本，sass-loader@11.0.0 不支持 vue@2.6.12 如果 node 版本大于 16 ， sass-loader 建议使用 v8.x 版本

安装 uni-ui

npm i @dcloudio/uni-ui 或 yarn add @dcloudio/uni-ui

配置easycom

使用 npm 安装好 uni-ui 之后，需要配置 easycom 规则，让 npm 安装的组件支持 easycom

打开项目根目录下的 pages.json 并添加 easycom 节点：

// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},

// 其他内容
pages:[
// ...
]
}

在 template 中使用组件：

<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>

注意

• uni-ui 现在只推荐使用 easycom ，如自己引用组件，可能会出现组件找不到的问题

• 使用 npm 安装的组件，默认情况下 babel-loader 会忽略所有 node_modules 中的文件 ，导致条件编译失效，需要通过配置 vue.config.js 解决：

  // 在根目录创建 vue.config.js 文件，并配置如下
module.exports = {
transpileDependencies: ['@dcloudio/uni-ui']
}

• uni-ui 是uni-app内置组件的扩展。注意与web开发不同，uni-ui不包括基础组件，它是基础组件的补充。web开发中有的开发者习惯用一个ui库完成所有开发，但在uni-app体系中，推荐开发者首先使用性能更高的基础组件，然后按需引入必要的扩展组件。

• uni-ui 不支持使用 Vue.use() 的方式安装

四、总结与展望

uni-ui作为一套基于uni-app的全端兼容、高性能UI框架，凭借其独特的产品特点和技术实现，为开发者提供了极大的便利和效率提升。未来，uni-ui将继续优化和完善自身的功能和技术体系，支持更多的平台和设备类型，满足更多用户的需求。同时，我们也期待更多的开发者和社区成员能够加入到uni-ui的开发和贡献中来，共同推动uni-ui的发展和创新。

插件下载地址：

https://ext.dcloud.net.cn/plugin?id=55

github下载地址

https://github.com/dcloudio/uni-ui

官方文档：

https://uniapp.dcloud.io/component/uniui/uni-ui

前端技术交流群