uni-app组件概述

1、组件

1.1、组件的含义

• 组件是视图层的基本组成单元。

• 组件是一个单独且可复用的功能模块的封装。

组件，包括：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。

• <component-name>是开始标签，</component-name>是结束标签

• 开始标签和结束标签之间，称为组件内容。如下面的content；

• 开始标签上可以写属性，属性可以有多个，多个属性之间用空格分割。如下面示例的property1和property2

• 每个属性通过=赋值。如下面的示例中，属性property1的值被设为字符串value

所有组件与属性名都是小写，单词之间以连字符-连接。

<component-name property1="value" property2="value">content
</component-name>

如下的例子：

<template><view><button size="mini">按钮</button></view>
</template>

按照Vue单组件的要求，每个vue文件的根节点必须为 <template>，且这个 <template> 下只能且必须有一个根 <view> 组件。

组件属性有多种类型：Boolean、Number、String、Array、Object、Any、EventHandler(事件处理，譬如：点击事件、焦点事件等)

<template><view><--! :disabled的值设置为布尔值，hover-start-time的值设置为Number --><button size="mini" :disabled="false" hover-start-time=20 >按钮</button></view>
</template>

公共属性

每个组件都拥有这些属性，仅限于uniapp

属性名	类型	描述	解释
id	String	组件的唯一标识	一般用于获取组件的上下文对象，需要保持整个页面的唯一
ref	String	Vue组件中的唯一标识	用来给子组件注册引用信息
class	String	组件的类名	通常用于设置样式
style	String	内联样式	动态设置内联样式
hidden	bool	组件是否隐藏	默认为显示，设为false为隐藏
data-*	Any	自定义属性	组件上触发事件时，会发送给事件处理函数
@*	EventHandler	组件的事件

除了上述公共属性，还有一类特殊属性以v-开头，称之为vue指令，如v-if、v-else、v-for、v-model。

在组件中使用JavaScript变量，和Vue中定义的data数据相似。

<template><view><button size="mini" :disabled="buttondisble" hover-start-time=20 >{{buttonText}}</button></view>
</template>
<script>export default {data() {return {"buttonText":"点我送神龙刀","buttondisble":false}}}
</script>
​

组件的事件

每个组件都有事件，事件就是在进行某些操作时触发的某个方法。

比如button组件的点击事件，在点击按钮时，会触发。

事件作为组件的属性，用@开头。

<template><view><button size="mini" @click="clickbtn('按钮被点了一下')">按钮</button></view>
</template>
<script>export default {methods: {clickbtn(msg) {console.log("点击按钮得到的消息是：" + msg)}}}
</script>

​

1.2、基础组件

基础组件指的是uniapp内置的组件，无须定义，可以直接加载。

uniapp的基础组件和HTML标签类似，但是却不相同，与微信小程序相同，可以更好的满足移动端的体验。

虽然不推荐使用HTML标签，但实际上如果开发者写了div等标签，在编译到非H5平台时也会被编译器转换为view标签，类似的还有span转text、a转navigator等，包括css里的元素选择器也会转。但为了管理方便、策略统一，新写代码时仍然建议使用view等组件。

可以通过组合这些基础组件进行快速开发。在需要复用的情况下可封装成扩展组件。

基础组件规范，与小程序规范相近。但是要注意组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"。

<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="bindDateChange"><view class="picker">当前选择: {{date}}</view>
</picker>

1.3、基础组件分类

1.3.1、视图容器

组件名	说明
view	视图容器，类似于HTML中的div
scroll-view	可滚动视图容器
swiper	滑块视图容器，比如用于轮播banner
match-media	屏幕动态适配组件，比如窄屏上不显示某些内容
movable-area	可拖动区域
movable-view	可移动的视图容器，在页面中可以拖拽滑动或双指缩放。movable-view必须在movable-area组件中
cover-view	可覆盖在原生组件的上的文本组件
cover-image	可覆盖在原生组件的上的图片组件

1.3.2、基础内容容器

组件名	说明
icon	图标
text	文字
rich-text	富文本显示组件
progress	进度条

1.3.3、表单组件

标签名	说明
button	按钮
checkbox	多选框
editor	富文本输入框
form	表单
input	文本输入框
label	标签
picker	弹出式列表选择器
picker-view	窗体内嵌式列表选择器
radio	单选框
slider	滑动选择器
switch	开关
textarea	多行文本输入框

1.3.4、路由与页面跳转

组件名	说明
navigator	页面链接。类似于HTML中的a标签

1.3.5、媒体组件

组件名	说明
audio	声音
camera	相机
image	图片
video	视频
live-player	直播播放
live-pusher	实时音视频录制，也称直播推流

1.3.6、地图

组件名	说明
map	地图

1.3.7、画布

组件名	说明
canvas	画布

1.3.8、webview

组件名	说明
web-view	web浏览器组件

1.3.9、广告

组件名	说明
ad	广告组件
ad-draw	沉浸视频流广告组件

1.3.10、页面属性配置

组件名	说明
custom-tab-bar	底部tabbar自定义组件
navigation-bar	页面顶部导航
page-meta	页面属性配置节点

1.3.11、uniCloud

组件名	说明
unicloud-db组件	uniCloud数据库访问和操作组件

1.4、扩展组件

虽然所有的业务需求都可以通过基础组件来实现，但是有时候使用基础组件来实现某个功能是比较低效的。所以会有开发者封装各种功能的组件，用于提高开发效率。这类组件被称为扩展组件。一般在插件市场我们可以找到很多开发者开发的插件，用于实现各类功能。

比如：我们需要一个五角星点击评分的组件，在DCloud的插件市场里可以获取到：uni-rate 评分 - DCloud 插件市场

把这个uni-rate组件导入到你的uni-app项目下，在需要的vue页面里引用它，就可以在指定的地方显示出这个五角星组件。

<!-- 在index.vue页面引用 uni-rate 组件-->
<template><view><uni-rate></uni-rate><!-- 这里会显示一个五角星，并且点击后会自动亮星 --></view>
</template>

封装组件的好处多多，

1. 可以进行组件复用，就像我们定义了一个共用方法一样。

2. 代码更方便管理，扩展性更好

3. 提高开发效率，避免重复造轮子。方便测试。