当前 `uni-ui` 版本可以在 `nvue` 页面中使用,因为 `nvue` 的特性,故 `uni-ui` 大部分组件样式有较大改动,您如果觉得最新的 `nvue` 版本有兼容问题,可以使用 [vue](https://github.com/dcloudio/uni-ui/tree/last-vue) 版本
### uni ui产品特点
1. 高性能
目前为止,在小程序和混合app领域,暂时还没有比uni ui更高性能的框架。
- 自动差量更新数据
虽然uni-app支持小程序自定义组件,所有小程序的ui库都可以用。但小程序自定义组件的ui库都需要使用setData手动更新数据,在大数据量时、或高频更新数据时,很容易产生性能问题。
而uni ui属于vue组件,uni-app引擎底层自动diff更新数据。当然其实插件市场里众多vue组件都具备这个特点。
- 优化逻辑层和视图层通讯折损
非H5,不管是小程序还是App,不管是app的webview渲染还是原生渲染,全都是逻辑层和视图层分离的。这里就有一个逻辑层和视图层通讯的折损问题。
比如在视图层拖动一个可跟手的组件,由于通讯的损耗,用js监听很难做到实时跟手。
这时就需要使用css动画以及平台底层提供的wxs、bindingx等技术。不过这些技术都比较复杂,所以uni ui里做了封装,在需要跟手式操作的ui组件,比如swiperaction列表项左滑菜单,就在底层使用了这些技术,实现了高性能的交互体验
- 背景停止
很多ui组件是会一直动的,比如轮播图、跑马灯。即便这个窗体被新窗体挡住,它在背景层仍然在消耗着硬件资源。在Android的webview版本为chrome66以上,背景操作ui会引发很严重的性能问题,造成前台界面明显卡顿。
而uni ui的组件,会自动判断自己的显示状态,在组件不再可见时,不会再消耗硬件资源。
2. 全端
uni ui的组件都是多端自适应的,底层会抹平很多小程序平台的差异或bug。
比如导航栏navbar组件,会自动处理不同端的状态栏。
比如swiperaction组件,在app和微信小程序上会使用交互体验更好的wxs技术,但在不支持wxs的其他小程序端会使用js模拟类似效果。
uni ui还支持nvue原生渲染,[详见](https://github.com/dcloudio/uni-ui/tree/nvue-uni-ui)
未来uni ui还会支持pc等大屏设备。
3. 与uni统计自动集成实现免打点
uni统计是优秀的多端统计平台,见[tongji.dcloud.net.cn](https://tongji.dcloud.net.cn)。
除了一张报表看全端,它的另一个重要特点是免打点。
比如使用uni ui的navbar标题栏、收藏、购物车等组件,均可实现自动打点,统计页面标题等各种行为数据。
当然你也可以关闭uni统计,这不是强制的。
4. 主题扩展
uni ui支持[uni.scss](https://uniapp.dcloud.io/collocation/uni-scss),可以方便的切换App的风格。
ui是一种需求非常发散的产品,DCloud官方也无意用uni ui压制第三方ui插件的空间,但官方有义务在性能和多端方面提供一个开源的标杆给大家。
我们欢迎更多优秀的ui组件出现,也欢迎更多人贡献uni ui的主题风格,满足更多用户的需求。
### uni-ui 使用说明
#### 初始化项目
在 HBuilderX 中新建 uni-app 项目,进入项目目录,执行:
```
npm init -y
```
#### 安装 uni-ui
```
npm install @dcloudio/uni-ui
```
#### 使用 uni-ui
在 ``script`` 中引用组件:
```javascript
import {uniBadge} from '@dcloudio/uni-ui'
//import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' //也可使用此方式引入组件
export default {
components: {uniBadge}
}
```
在 ``template`` 中使用组件:
```html
<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 已支持的组件列表
|组件名 |引用路径 |说明 |
|--- |--- |--- |
|uniBadge |'@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' |[数字角标](https://ext.dcloud.net.cn/plugin?id=21) |
|uniCalendar | '@dcloudio/uni-ui/lib/uni-calendar/uni-calendar.vue' |[日历](https://ext.dcloud.net.cn/plugin?id=56) |
|uniCard |'@dcloudio/uni-ui/lib/uni-card/uni-card.vue' |[卡片](https://ext.dcloud.net.cn/plugin?id=22) |
|uniCollapse | '@dcloudio/uni-ui/lib/uni-collapse/uni-collapse.vue' |[折叠面板](https://ext.dcloud.net.cn/plugin?id=23) |
|uniCountdown |'@dcloudio/uni-ui/lib/uni-countdown/uni-countdown.vue' | [倒计时](https://ext.dcloud.net.cn/plugin?id=25) |
|uniDrawer |'@dcloudio/uni-ui/lib/uni-drawer/uni-drawer.vue' |[抽屉](https://ext.dcloud.net.cn/plugin?id=26) |
|uniFab |'@dcloudio/uni-ui/lib/uni-fab/uni-fab.vue' |[悬浮按钮](https://ext.dcloud.net.cn/plugin?id=144) |
|uniFav | '@dcloudio/uni-ui/lib/uni-fav/uni-fav.vue' |[收藏按钮](https://ext.dcloud.net.cn/plugin?id=864) |
|uniGoodsNav | '@dcloudio/uni-ui/lib/uni-goods-nav/uni-goods-nav.vue' |[商品导航](https://ext.dcloud.net.cn/plugin?id=865) |
|uniGrid | '@dcloudio/uni-ui/lib/uni-grid/uni-grid.vue' |[宫格](https://ext.dcloud.net.cn/plugin?id=27) |
|uniIcons |'@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue' |[图标](https://ext.dcloud.net.cn/plugin?id=28) |
|uniIndexedList |'@dcloudio/uni-ui/lib/uni-indexed-list/uni-indexed-list.vue' | [索引列表](https://ext.dcloud.net.cn/plugin?id=375) |
|uniList | '@dcloudio/uni-ui/lib/uni-list/uni-list.vue' |[列表](https://ext.dcloud.net.cn/plugin?id=24) |
|uniLoadMore | '@dcloudio/uni-ui/lib/uni-load-more/uni-load-more.vue' |[加载更多](https://ext.dcloud.net.cn/plugin?id=29) |
|uniNavBar |'@dcloudio/uni-ui/lib/uni-nav-bar/uni-nav-bar.vue' |[自定义导航栏](https://ext.dcloud.net.cn/plugin?id=52) |
|uniNoticeBar |'@dcloudio/uni-ui/lib/uni-notice-bar/uni-notice-bar.vue' |[通告栏](https://ext.dcloud.net.cn/plugin?id=30) |
|uniNumberBox |'@dcloudio/uni-ui/lib/uni-number-box/uni-number-box.vue' |[数字输入框](https://ext.dcloud.net.cn/plugin?id=31) |
|uniPagination |'@dcloudio/uni-ui/lib/uni-pagination/uni-pagination.vue' |[分页器](https://ext.dcloud.net.cn/plugin?id=32) |
|uniPopup | '@dcloudio/uni-ui/lib/uni-popup/uni-popup.vue' |[弹出层](https://ext.dcloud.net.cn/plugin?id=329) |
|uniRate |'@dcloudio/uni-ui/lib/uni-rate/uni-rate.vue' |[评分](https://ext.dcloud.net.cn/plugin?id=33) |
|uniSearchBar | '@dcloudio/uni-ui/lib/uni-search-bar/uni-search-bar.vue' |[搜索栏](https://ext.dcloud.net.cn/plugin?id=866) |
|uniSegmentedControl|'@dcloudio/uni-ui/lib/uni-segmented-control/uni-segmented-control.vue' |[分段器](https://ext.dcloud.net.cn/plugin?id=54) |
|uniSteps |'@dcloudio/uni-ui/lib/uni-steps/uni-steps.vue' |[步骤条](https://ext.dcloud.net.cn/plugin?id=34) |
|uniSwipeAction | '@dcloudio/uni-ui/lib/uni-swipe-action/uni-swipe-action.vue' |[滑动操作](https://ext.dcloud.net.cn/plugin?id=181) |
|uniSwiperDot |'@dcloudio/uni-ui/lib/uni-swiper-dot/uni-swiper-dot.vue' |[轮播图指示点](https://ext.dcloud.net.cn/plugin?id=284)|
|uniTag | '@dcloudio/uni-ui/lib/uni-tag/uni-tag.vue' |[标签](https://ext.dcloud.net.cn/plugin?id=35) |
#### 其他
- uni-ui 是全端兼容的基于flex布局的、无dom的ui库
- uni-ui 是uni-app内置组件的扩展。注意与web开发不同,uni-ui不包括基础组件,它是基础组件的补充。web开发中有的开发者习惯用一个ui库完成所有开发,但在uni-app体系中,推荐开发者
言宇程序
- 粉丝: 2417
- 资源: 5259
最新资源
- 信捷PLC八轴伺服步进模块化编程:公式计算、报警处理与主流系统应用参考程序,信捷PLC程序,八轴程序,有伺服也有步进,内部有伺服和步进计算公式算,模块化编程框架,包含各功能区规划,伺服步进电机DOG+
- uniapp 小程序端与H5(非uniapp写的)之间的通信
- 三菱PLC手轮发脉冲控制三轴伺服电机编程案例:精准同步控制,参数设置详解,三菱PLC项目案例之手轮发脉冲控制三轴伺服电机 器件:三菱FX3UPLC,威纶通触摸屏,三菱伺服,5轴手轮等 控制方式:PL
- PLC控制步进电机驱动丝杆滑台运行案例:三菱FX1SPLC编程实现距离转化脉冲、浮点数处理及自动化功能调试,三菱PLC项目案例学习之PLC控制伺服或步进电机带动丝运行案例 器件:三菱FX1SPLC
- ABB ACS510变频器恒压供水功能优化:昆仑通态触摸屏直接通讯一拖二方案,省PLC,一键参数设置,稳定可靠 ,ABB ACS510变频器恒压供水昆仑通态直接通讯一拖二 ABB变频器恒压供水触摸屏通
- 课程设计JSP教师档案管理系统.zip
- "西门子S7-200 PLC驱动的恒压供水系统全套图纸程序:一拖二、一拖三模式实践指南,配合富士PID控制与ABB变频器,稳定界面且易于操作",恒压供水全套图纸程序,实践中都在使用 西门子s7-200
- Labview海纳传感器标定程序:专为国内大型转向器供应商定制的汽车EPS转向器海纳传感器标定解决方案,labview海纳传感器标定程序,汽车E p s转向器海纳传感器标定,主要客户针对国内几家大的转
- Qt大屏电子看板系统源码基础版:灵活界面布局,丰富子控件,多数据源支持,跨版本Qt与嵌入式Linux运行,三内核版本可选,Qt大屏电子看板系统源码基础版 1. 整体总共分三界面,一级界面是整体布局,二
- 恒压供水全套图纸程序:西门子高端智能控制器设计,一拖多系列,超越市场普通控制器,质量与定位双重保障 ,恒压供水全套图纸程序 西门子 恒压供水全套图纸 程序仅供参考 2.一拖二,一拖二加
- 基于Qt5.15的图片转文字源码程序:强大截屏功能,跨平台运行,简易操作与编译说明,最新20220415版本Qt5.15Windows10系统下运行,文字识别源码程序,图片转文字源码程序,带界面,Qt
- 高性能5轴运动控制器:示教功能,支持多种加工编程,适用于多行业自动化机器控制,5轴运动控制器,有示教功能 dxf图形输入加工,g代码加工,有直线插补,圆弧插补,编程简单,适合用作机械手,抛光机,自动
- 基于FPGA的Quartus与Vivado实时图像处理技术:帧间差分法实现运动物体精准追踪,运动追踪、物体跟踪 基于FPGA的实时图像处理,使用帧间差分法实现运动物的体实时追踪 基于Quartus
- 基于STM32极速字符识别系统:源码+原理图+实物演示,驱动外设高效工作,有偿技术支持,可拓展开发,基于stm32的字符识别系统,包含源码、原理图、PCBDoc、原件清单、实物等 该程序可极速识别手
- ABB变频器恒压供水通讯程序:触摸屏直接控制,一拖三适用,节约成本且稳定可靠,恒压供水ABB变频器恒压供水触摸屏通讯程序 1.采用ABB变频器Acs510 自带恒压供水功能; 2.用昆仑通态触摸屏
- 基于深度学习与OpenCV的车型识别方法与系统实现,一个完整的车型识别项目基于深度学习的车型识别方法与系统实现也有基于opencv的车型识别系统 ,核心关键词:深度学习; 车型识别方法; 系统实现
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈