【Uni-App】组件笔记

官网文档地址：

https://uniapp.dcloud.io/component/README

• 组件是视图层的基本组成单元。
• 组件是一个单独且可复用的功能模块的封装。

每个组件，包括如下几个部分：以组件名称为标记的

1、开始标签和结束标签、

2、组件内容、

3、组件属性、

4、组件属性值。

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

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

组件的属性类型

类型	描述	注解
Boolean	布尔值	组件写上该属性，不管该属性等于什么，其值都为 true，只有组件上没有写该属性时，属性值才为 false。如果属性值为变量，变量的值会被转换为 Boolean 类型。
Number	数字	1, 2.5
String	字符串	"string"
Array	数组	[ 1, "string" ]
Object	对象	{ key: value }
EventHandler	事件处理函数名	handlerName 是 methods 中定义的事件处理函数名
Any	任意属性

下面的例子演示了组件的属性设置bool值和数字的例子。

注意false作为一个js变量，在组件的属性中使用时，属性前面需增加:冒号前缀，属性值仍使用引号包裹，但引号里不是字符串，而是js。

<template>
    <view>
        <button size="mini" :disabled="false" hover-start-time=20 >按钮</button>
    </view>
</template>

公共属性：

每个组件都有各自定义的属性，但所有uni-app的组件，都有如下属性：

属性名	类型	描述	注解
id	String	组件的唯一标示	一般用于获取组件上下文对象（如：VideoContext），需要保持整个页面唯一
ref	String	vue中组件的唯一标示	用来给子组件注册引用信息，详见 Vue 文档
class	String	组件的样式类	在对应的 css 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否隐藏	所有组件默认是显示的
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
@*	EventHandler	组件的事件	详见各组件详细文档，事件绑定参考 事件处理器

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

事件

每个组件都有“事件”。事件就是在指定的条件下触发某个js方法。

比如button组件，有点击事件，也就是当手机用户点击这个button组件时，会触发这个事件。

事件也是组件的属性，只不过这类属性以@为前缀。

事件的属性值，指向一个在script的methods里定义过的js方法，还可以给方法传参数。

下面是组件事件的示例：

• click是button组件的点击事件，在用户点击这个button时触发
• click指向了methods中定义的goto方法，并且传递了一个参数'/pages/about/about'

<template>
    <view>
        <button size="mini" @click="goto('/pages/about/about')">按钮</button>
    </view>
</template>
<script>
    export default {
        methods: {
            goto(url) {
                console.log("按钮被点击了，且传入的参数是：" + url)
            }
        }
    }
</script>

基础组件：

uni-app的组件，分为基础组件和扩展组件。

基础组件在uni-app框架中已经内置，无需将内置组件的文件导入项目，也无需注册内置组件，随时可以直接使用，比如<view>组件。

除了基础组件，都称为扩展组件。扩展组件需要将组件导入项目中才可以使用。

uni-app为开发者提供了一系列基础组件，类似HTML里的基础标签元素。

但uni-app的组件与HTML不同，而是与小程序相同，可更好的满足手机端的使用习惯。

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

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

uni-app 基础组件规范，与小程序规范相近。如果了解小程序开发的话，uni-app的基础组件会感觉很熟悉。但需要注意组件上的事件绑定，需要以 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、视图容器（View Container）：

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

2、基础内容（Basic Content）：

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

3、表单组件（Form）：

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

4、路由与页面跳转（Navigation）：

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

5、媒体组件（Media）：

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

6、地图（Map）：

组件名	说明
map	地图

7、画布（Canvas）：

组件名	说明
canvas	画布

8、webview（Web-view）：

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

9、广告

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

10、页面属性配置

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

11、uniCloud

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

12、Easycom 引入组件规范

HBuilderX 2.5.5起支持

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

1、组件安装在项目的components目录下或uni_modules目录下，

2、符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

比如前述举例的uni-rate组件，它导入到uni-app项目后，存放在了目录/components/uni-rate/uni-rate.vue

同时它的组件名称也叫uni-rate，所以这样的组件，不用在script里注册和引用。 如下：

<template>
        <view>
            <uni-rate></uni-rate><!-- 这里会显示一个五角星，并且点击后会自动亮星 -->
        </view>
    </template>
<script>
    // 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
    export default {
        data() {
            return {

            }
        }
    }
</script>

不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。

组件库批量安装，随意使用，自动按需打包。

以官方的uni-ui为例，在HBuilderX新建项目界面选择uni-ui项目模板，只需在页面中敲u，拉出大量组件代码块，直接选择，即可使用。大幅提升开发效率，降低使用门槛。

在DCloud插件市场下载符合components/组件名称/组件名称.vue目录结构的组件，均可直接使用。

easycom是自动开启的，不需要手动开启。

13、使用原始Vue方式引入组件：

如果你的组件名称或路径不符合easycom的默认规范，可以在pages.json的easycom节点进行个性化设置，自定义匹配组件的策略。另见

如果不使用easycom，手动引用和注册vue组件，则需要分3步写如下代码：

1. import导入组件
2. components里注册组件
3. template中使用组件

  <template>
        <view>
            <uni-rate text="1"></uni-rate><!-- 3.使用组件 -->
        </view>
    </template>
    <script>
        import uniRate from '@/components/uni-rate/uni-rate.vue';//1.导入组件
        export default {
            components:{uniRate }//2.注册组件
        }
    </script>