Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
wzj-java
uni-app
提交
d57a1c2a
U
uni-app
项目概览
wzj-java
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
d57a1c2a
编写于
11月 03, 2019
作者:
W
wanganxp
提交者:
GitHub
11月 03, 2019
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Update README.md
上级
0f9f9862
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
96 addition
and
46 deletion
+96
-46
docs/component/README.md
docs/component/README.md
+96
-46
未找到文件。
docs/component/README.md
浏览文件 @
d57a1c2a
...
...
@@ -9,8 +9,6 @@
开发者可以通过组合这些基础组件进行快速开发。
基于内置的基础组件,可以开发各种扩展组件,组件规范与vue组件相同。
DCloud提供了扩展组件框架uni-ui(见文末),同时更多三方开发的组件也收录到插件市场。
什么是组件:
*
组件是视图层的基本组成单元。
...
...
@@ -68,7 +66,7 @@ DCloud提供了扩展组件框架uni-ui(见文末),同时更多三方开
|组件名|说明|
|:-|:-|
|
[
view
](
component/view.md
)
|视图容器|
|
[
view
](
component/view.md
)
|视图容器
,类似于HTML中的div
|
|
[
scroll-view
](
component/scroll-view.md
)
|可滚动视图容器|
|
[
swiper
](
component/swiper.md
)
|滑块视图容器|
...
...
@@ -90,9 +88,9 @@ DCloud提供了扩展组件框架uni-ui(见文末),同时更多三方开
|
[
input
](
component/input.md
)
|输入框|
|
[
checkbox
](
component/checkbox.md
)
|多项选择器|
|
[
radio
](
component/radio.md
)
|单项选择器|
|
[
picker
](
component/picker.md
)
|列表选择器|
|
[
picker-view
](
component/picker-view.md
)
|
内嵌
列表选择器|
|
[
slider
](
component/slider.md
)
|
滚
动选择器|
|
[
picker
](
component/picker.md
)
|
弹出式
列表选择器|
|
[
picker-view
](
component/picker-view.md
)
|
窗体内嵌式
列表选择器|
|
[
slider
](
component/slider.md
)
|
滑
动选择器|
|
[
switch
](
component/switch.md
)
|开关选择器|
|
[
label
](
component/label.md
)
|标签|
...
...
@@ -100,7 +98,7 @@ DCloud提供了扩展组件框架uni-ui(见文末),同时更多三方开
|组件名|说明|
|:-|:-|
|
[
navigator
](
component/navigator.md
)
|
应用链接
|
|
[
navigator
](
component/navigator.md
)
|
页面链接。类似于HTML中的a标签
|
**媒体组件(Media):**
...
...
@@ -110,7 +108,8 @@ DCloud提供了扩展组件框架uni-ui(见文末),同时更多三方开
|
[
camera
](
component/camera.md
)
|相机|
|
[
image
](
component/image.md
)
|图片|
|
[
video
](
component/video.md
)
|视频|
|
[
live-player
](
component/live-player.md
)
|直播|
|
[
live-player
](
component/live-player.md
)
|直播播放|
|
[
live-pusher
](
component/live-pusher.md
)
|实时音视频录制,也称直播推流|
**地图(Map):**
...
...
@@ -131,56 +130,107 @@ DCloud提供了扩展组件框架uni-ui(见文末),同时更多三方开
|:-|:-|
|
[
web-view
](
component/web-view.md
)
|web浏览器组件|
**平台开放数据(Open-data):**
|组件名|说明|
|:-|:-|
|
[
open-data
](
component/open-data.md
)
|展示平台开放的数据|
**各平台专有组件**
在小程序平台和weex平台,还有一些专有组件,比如open-data,详见左侧导航
### 扩展组件(uni-ui):@uniui
uni-ui是DCloud提供的一个跨端ui库,它是基于vue组件的、flex布局的、无dom的跨全端ui框架。
注意与web开发不同,uni-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模拟类似效果。
web开发中有的开发者习惯用一个ui库完成所有开发,但在uni-app体系中,推荐开发者首先使用性能更高的基础组件,然后按需引入必要的扩展组件。
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支持npm安装和zip下载安装2种方式。
npm安装参考:
[
https://ext.dcloud.net.cn/plugin?id=55
](
https://ext.dcloud.net.cn/plugin?id=55
)
下表为uni-ui的扩展组件清单,点击每个组件可单独安装。
|组件名|说明|
|:-|:-|
|
[
Badge
](
https://ext.dcloud.net.cn/plugin?id=21
)
| 数字角标|
|
[
Calendar
](
https://ext.dcloud.net.cn/plugin?id=56
)
| 日历|
|
[
Card
](
https://ext.dcloud.net.cn/plugin?id=22
)
| 卡片|
|
[
Collapse
](
https://ext.dcloud.net.cn/plugin?id=23
)
| 折叠面板|
|
[
CountDown
](
https://ext.dcloud.net.cn/plugin?id=25
)
| 倒计时|
|
[
Drawer
](
https://ext.dcloud.net.cn/plugin?id=26
)
| 抽屉|
|
[
Fab
](
https://ext.dcloud.net.cn/plugin?id=144
)
| 悬浮按钮|
|
[
Grid
](
https://ext.dcloud.net.cn/plugin?id=27
)
| 宫格|
|
[
Icon
](
https://ext.dcloud.net.cn/plugin?id=28
)
| 图标|
|
[
IndexedList
](
https://ext.dcloud.net.cn/plugin?id=375
)
| 索引列表|
|
[
List
](
https://ext.dcloud.net.cn/plugin?id=24
)
| 列表|
|
[
LoadMore
](
https://ext.dcloud.net.cn/plugin?id=29
)
| 加载更多|
|
[
NavBar
](
https://ext.dcloud.net.cn/plugin?id=52
)
| 自定义导航栏|
|
[
NoticeBar
](
https://ext.dcloud.net.cn/plugin?id=30
)
| 通告栏|
|
[
NumberBox
](
https://ext.dcloud.net.cn/plugin?id=31
)
| 数字输入框|
|
[
Pagination
](
https://ext.dcloud.net.cn/plugin?id=32
)
| 分页器|
|
[
PopUp
](
https://ext.dcloud.net.cn/plugin?id=329
)
| 弹出层|
|
[
Rate
](
https://ext.dcloud.net.cn/plugin?id=33
)
| 评分|
|
[
SegmentedControl
](
https://ext.dcloud.net.cn/plugin?id=54
)
| 分段器|
|
[
Steps
](
https://ext.dcloud.net.cn/plugin?id=34
)
| 步骤条|
|
[
SwipeAction
](
https://ext.dcloud.net.cn/plugin?id=181
)
| 滑动操作|
|
[
SwiperDot
](
https://ext.dcloud.net.cn/plugin?id=284
)
| 轮播图指示点|
#### uni ui的使用方式
uni ui支持npm安装,和HBuilderX单独导入个别组件等多种使用方式
1.
npm安装参考:
[
https://ext.dcloud.net.cn/plugin?id=55
](
https://ext.dcloud.net.cn/plugin?id=55
)
2.
下表为uni-ui的扩展组件清单,点击每个组件可单独安装。
|组件名|说明|
|:-|:-|
|
[
Badge
](
https://ext.dcloud.net.cn/plugin?id=21
)
| 数字角标|
|
[
Calendar
](
https://ext.dcloud.net.cn/plugin?id=56
)
| 日历|
|
[
Card
](
https://ext.dcloud.net.cn/plugin?id=22
)
| 卡片|
|
[
Collapse
](
https://ext.dcloud.net.cn/plugin?id=23
)
| 折叠面板|
|
[
CountDown
](
https://ext.dcloud.net.cn/plugin?id=25
)
| 倒计时|
|
[
Drawer
](
https://ext.dcloud.net.cn/plugin?id=26
)
| 抽屉|
|
[
Fab
](
https://ext.dcloud.net.cn/plugin?id=144
)
| 悬浮按钮|
|
[
Fav
](
https://ext.dcloud.net.cn/plugin?id=864
)
| 收藏按钮|
|
[
GoodsNav
](
https://ext.dcloud.net.cn/plugin?id=865
)
| 底部购物导航|
|
[
Grid
](
https://ext.dcloud.net.cn/plugin?id=27
)
| 宫格|
|
[
Icon
](
https://ext.dcloud.net.cn/plugin?id=28
)
| 图标|
|
[
IndexedList
](
https://ext.dcloud.net.cn/plugin?id=375
)
| 索引列表|
|
[
List
](
https://ext.dcloud.net.cn/plugin?id=24
)
| 列表|
|
[
LoadMore
](
https://ext.dcloud.net.cn/plugin?id=29
)
| 加载更多|
|
[
NavBar
](
https://ext.dcloud.net.cn/plugin?id=52
)
| 自定义导航栏|
|
[
NoticeBar
](
https://ext.dcloud.net.cn/plugin?id=30
)
| 通告栏|
|
[
NumberBox
](
https://ext.dcloud.net.cn/plugin?id=31
)
| 数字输入框|
|
[
Pagination
](
https://ext.dcloud.net.cn/plugin?id=32
)
| 分页器|
|
[
PopUp
](
https://ext.dcloud.net.cn/plugin?id=329
)
| 弹出层|
|
[
Rate
](
https://ext.dcloud.net.cn/plugin?id=33
)
| 评分|
|
[
SearchBar
](
https://ext.dcloud.net.cn/plugin?id=866
)
| 搜索栏|
|
[
SegmentedControl
](
https://ext.dcloud.net.cn/plugin?id=54
)
| 分段器|
|
[
Steps
](
https://ext.dcloud.net.cn/plugin?id=34
)
| 步骤条|
|
[
SwipeAction
](
https://ext.dcloud.net.cn/plugin?id=181
)
| 滑动操作|
|
[
SwiperDot
](
https://ext.dcloud.net.cn/plugin?id=284
)
| 轮播图指示点|
|
[
Tag
](
https://ext.dcloud.net.cn/plugin?id=35
)
| 标签|
**更多组件**
除了基础组件、uni-ui,插件市场还有更多扩展组件、模板,包括前端组件和原生扩展组件,具体见
[
插件市场
](
https://ext.dcloud.net.cn/
)
。
关于其他vue的web组件库、小程序组件库是否能在uni-app中使用的问题,参考
[
http://ask.dcloud.net.cn/article/35489
](
http://ask.dcloud.net.cn/article/35489
)
\ No newline at end of file
关于其他vue的web组件库、小程序组件库是否能在uni-app中使用的问题,参考
[
https://ask.dcloud.net.cn/article/35489
](
https://ask.dcloud.net.cn/article/35489
)
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录