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>封装组件的好处多多，
-
可以进行组件复用，就像我们定义了一个共用方法一样。
-
代码更方便管理，扩展性更好文章来源：https://www.toymoban.com/news/detail-469798.html
-
提高开发效率，避免重复造轮子。方便测试。文章来源地址https://www.toymoban.com/news/detail-469798.html
到了这里，关于uni-app组件概述的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
