程序员scholar 程序员scholar
首页
  • Java 基础

    • JavaSE
    • JavaIO
    • JavaAPI速查
  • Java 高级

    • JUC
    • JVM
    • Java新特性
    • 设计模式
  • Web 开发

    • Servlet
    • Java网络编程
  • Web 标准

    • HTML
    • CSS
    • JavaScript
  • 前端框架

    • Vue2
    • Vue3
    • Vue3 + TS
    • 微信小程序
    • uni-app
  • 工具与库

    • jQuery
    • Ajax
    • Axios
    • Webpack
    • Vuex
    • WebSocket
    • 第三方登录
  • 后端与语言扩展

    • ES6
    • Typescript
    • node.js
  • Element-UI
  • Apache ECharts
  • 数据结构
  • HTTP协议
  • HTTPS协议
  • 计算机网络
  • Linux常用命令
  • Windows常用命令
  • SQL数据库

    • MySQL
    • MySQL速查
  • NoSQL数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • RabbitMQ
  • 服务器

    • Nginx
  • Spring框架

    • Spring6
    • SpringMVC
    • SpringBoot
    • SpringSecurity
  • SpringCould微服务

    • SpringCloud基础
    • 微服务之DDD架构思想
  • 日常必备

    • 开发常用工具包
    • Hutoll工具包
    • IDEA常用配置
    • 开发笔记
    • 日常记录
    • 项目部署
    • 网站导航
    • 产品学习
    • 英语学习
  • 代码管理

    • Maven
    • Git教程
    • Git小乌龟教程
  • 运维工具

    • Docker
    • Jenkins
    • Kubernetes
  • 算法笔记

    • 算法思想
    • 刷题笔记
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
首页
  • Java 基础

    • JavaSE
    • JavaIO
    • JavaAPI速查
  • Java 高级

    • JUC
    • JVM
    • Java新特性
    • 设计模式
  • Web 开发

    • Servlet
    • Java网络编程
  • Web 标准

    • HTML
    • CSS
    • JavaScript
  • 前端框架

    • Vue2
    • Vue3
    • Vue3 + TS
    • 微信小程序
    • uni-app
  • 工具与库

    • jQuery
    • Ajax
    • Axios
    • Webpack
    • Vuex
    • WebSocket
    • 第三方登录
  • 后端与语言扩展

    • ES6
    • Typescript
    • node.js
  • Element-UI
  • Apache ECharts
  • 数据结构
  • HTTP协议
  • HTTPS协议
  • 计算机网络
  • Linux常用命令
  • Windows常用命令
  • SQL数据库

    • MySQL
    • MySQL速查
  • NoSQL数据库

    • Redis
    • ElasticSearch
  • 数据库

    • MyBatis
    • MyBatis-Plus
  • 消息中间件

    • RabbitMQ
  • 服务器

    • Nginx
  • Spring框架

    • Spring6
    • SpringMVC
    • SpringBoot
    • SpringSecurity
  • SpringCould微服务

    • SpringCloud基础
    • 微服务之DDD架构思想
  • 日常必备

    • 开发常用工具包
    • Hutoll工具包
    • IDEA常用配置
    • 开发笔记
    • 日常记录
    • 项目部署
    • 网站导航
    • 产品学习
    • 英语学习
  • 代码管理

    • Maven
    • Git教程
    • Git小乌龟教程
  • 运维工具

    • Docker
    • Jenkins
    • Kubernetes
  • 算法笔记

    • 算法思想
    • 刷题笔记
  • 面试问题常见

    • 十大经典排序算法
    • 面试常见问题集锦
关于
GitHub (opens new window)
npm

(进入注册为作者充电)

  • 原生微信小程序

  • uniapp多端开发

    • 快速入门

    • 内置组件

    • 扩展组件

      • uni-ui 介绍
        • uni-ui产品特点
          • 1、高性能
          • 2、全端
          • 3、风格扩展
          • 4、与uniCloud协作
          • 5、与uni统计自动集成实现免打点
          • 6、uni-ui符合全套DCloud组件规范
      • Uni-UI 的安装和使用
      • uni-sass 辅助样式
      • uni-badge 数字角标
      • uni-breadcrumb 面包屑
      • uni-calendar 日历
      • uni-card 卡片
      • uni-collapse 折叠面板
      • uni-combox 组合框
      • uni-countdown 倒计时
      • uni-data-checkbox 数据选择器
      • uni-data-picker 级联选择器
      • uni-data-select 下拉框
      • 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-section 标题栏
      • uni-segmented-control 分段器
      • uni-steps 步骤条
      • uni-swipe-action 滑动操作
      • uni-swiper-dot 轮播图指示点
      • uni-table 表格
      • uni-tag 标签
      • uni-title 章节标题
      • uni-tooltip 文字提示
      • uni-transition 过渡动画
  • 小程序开发
  • uniapp多端开发
  • 扩展组件
scholar
2024-10-21
目录

uni-ui 介绍

# uni-ui 介绍

uni-ui 是DCloud提供的一个跨端ui库,它是基于vue组件的、flex布局的、无dom的跨全端ui框架。

uni-ui 不包括内置组件,它是内置组件的补充。

# 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原生渲染。

uni-ui还支持pc等宽屏设备,可以通过PC浏览器访问https://hellouniapp.dcloud.net.cn/pages/extUI/badge/badge (opens new window)体验

# 3、风格扩展

uni-ui的默认风格是中型的,与uni-app基础组件风格一致。但它支持uni.scss (opens new window),可以方便的扩展和切换应用的风格。

UI 是一种需求非常发散的产品,DCloud官方也无意用uni-ui压制第三方 UI 插件的空间,但官方有义务在性能和跨端方面提供一个开源的标杆给大家。

我们欢迎更多优秀的 UI 组件出现,也欢迎更多人贡献uni-ui的主题风格,满足更多用户的需求。

# 4、与uniCloud协作

uni-ui里很多组件与uniCloud打通,可大幅提升开发效率

# 5、与uni统计自动集成实现免打点

uni统计是优秀的多端统计平台,见 tongji.dcloud.net.cn (opens new window)。

除了一张报表看全端,它的另一个重要特点是免打点,也成为无侵入式埋点。

比如使用uni-ui的navbar标题栏、收藏、购物车等组件,均可实现自动打点,统计页面标题等各种行为数据。

当然你也可以关闭uni统计,这不是强制的。

# 6、uni-ui符合全套DCloud组件规范

包括 easycom、uni_module、datacom,全部遵循。

编辑此页 (opens new window)
上次更新: 2025/02/01, 02:18:15
开放数据展示组件
Uni-UI 的安装和使用

← 开放数据展示组件 Uni-UI 的安装和使用→

Theme by Vdoing | Copyright © 2019-2025 程序员scholar
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式