但uni-app的组件与HTML不同,而是与微信小程序相同,更适合手机端使用。
虽然不推荐使用HTML标签,但实际上如果开发者写了等标签,在编译到非H5平台时也会被编译器转换为view
标签,类似的还有span
转text
、转navigator
等,包括css里的元素选择器也会转。但为了管理方便、策略统一,新写代码时仍然建议使用view等组件。
开发者可以通过组合这些基础组件进行快速开发。基于内置的基础组件,可以开发各种扩展组件,组件规范与vue组件相同。
DCloud提供了扩展组件框架uni-ui(见文末),同时更多三方开发的组件也收录到插件市场。
什么是组件:
- 一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。
Tips
- 所有组件与属性名都是小写,单词之间以连字符
-
连接。 - 平台差异说明若无特殊说明,则表示所有平台均支持。
属性类型
所有组件都有的属性:
属性名 | 类型 | 描述 | 注解 |
---|---|---|---|
id | String | 组件的唯一标示 | 保持整个页面唯一 |
class | String | 组件的样式类 | 在对应的 css 中定义的样式类 |
style | String | 组件的内联样式 | 可以动态设置的内联样式 |
hidden | Boolean | 组件是否隐藏 | 所有组件默认是显示的 |
data- | Any | 自定义属性 | 组件上触发的事件时,会发送给事件处理函数 |
@ | EventHandler | 组件的事件 | 详见各组件详细文档,事件绑定参考 |
特殊属性
几乎所有组件都有各自自定义的属性,可以对该组件的功能或样式进行修饰,请参考各个组件的定义。
视图容器(View Container):
组件名 | 说明 |
---|---|
view | 视图容器 |
可滚动视图容器 | |
swiper | 滑块视图容器 |
基础内容(Basic Content):
组件名 | 说明 |
---|---|
图标 | |
text | 文字 |
富文本 | |
progress | 进度条 |
表单组件(Form):
导航(Navigation):
组件名 | 说明 |
---|---|
应用链接 |
媒体组件(Media):
组件名 | 说明 |
---|---|
audio | 音频 |
相机 | |
image | 图片 |
视频 | |
live-player | 直播 |
地图(Map):
组件名 | 说明 |
---|---|
地图 |
画布(Canvas):
webview(Web-view):
组件名 | 说明 |
---|---|
web-view | web浏览器组件 |
组件名 | 说明 |
---|---|
展示平台开放的数据 |
扩展组件(uni-ui):
uni-ui是DCloud提供的一个跨端ui库,它是基于vue组件的、flex布局的、无dom的跨全端ui框架。
注意与web开发不同,uni-ui不包括基础组件,它是基础组件的补充。
web开发中有的开发者习惯用一个ui库完成所有开发,但在uni-app体系中,推荐开发者首先使用性能更高的基础组件,然后按需引入必要的扩展组件。
uni-ui支持npm安装和zip下载安装2种方式。
npm安装参考:https://ext.dcloud.net.cn/plugin?id=55
下表为uni-ui的扩展组件清单,点击每个组件可单独安装。
组件名 | 说明 |
---|---|
数字角标 | |
Calendar | 日历 |
卡片 | |
Collapse | 折叠面板 |
倒计时 | |
Drawer | 抽屉 |
悬浮按钮 | |
Grid | 宫格 |
图标 | |
IndexedList | 索引列表 |
列表 | |
LoadMore | 加载更多 |
自定义导航栏 | |
NoticeBar | 通告栏 |
数字输入框 | |
Pagination | 分页器 |
弹出层 | |
Rate | 评分 |
分段器 | |
Steps | 步骤条 |
滑动操作 | |
SwiperDot | 轮播图指示点 |
标签 |
更多组件
除了基础组件、uni-ui,插件市场还有更多扩展组件、模板,包括前端组件和原生扩展组件,具体见插件市场。
发现错误?想参与编辑?