组件概述

uni-app组件系统介绍

uni-app提供了丰富的跨平台组件，这些组件是基于各平台的原生组件进行封装的，兼具跨平台和高性能的特点。通过使用这些组件，开发者可以快速构建功能完善的应用界面。

组件分类

uni-app的组件主要分为以下几类：

基础组件

基础组件是最常用的组件，用于构建页面的基本结构和布局：

view：视图容器，类似于HTML中的div
text：文本组件，用于显示文本内容
button：按钮组件
image：图片组件
scroll-view：可滚动视图区域
swiper：轮播图组件
等等

表单组件

表单组件用于收集用户输入：

form：表单容器
input：输入框
textarea：多行文本输入框
checkbox：多选框
radio：单选框
switch：开关选择器
slider：滑动选择器
picker：弹出式选择器
等等

导航组件

导航组件用于页面导航：

navigator：页面链接

媒体组件

媒体组件用于处理多媒体内容：

audio：音频播放组件
video：视频播放组件
camera：相机组件
等等

地图组件

map：地图组件

画布组件

canvas：画布组件，用于绘制图形

开放能力组件

开放能力组件用于调用平台特有的开放能力：

web-view：网页容器
ad：广告组件
等等

组件使用方式

在uni-app中使用组件非常简单，只需要在模板中使用对应的标签即可：

vue

<template>
  <view class="container">
    <text>这是一个文本组件</text>
    <button type="primary" @click="handleClick">这是一个按钮</button>
    <image src="/static/logo.png" mode="aspectFit"></image>
  </view>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了');
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}
</style>

组件通用属性

所有组件都支持以下属性：

属性名	类型	描述	注意事项
id	String	组件的唯一标识	一个页面中，id不能重复
class	String	组件的样式类	在对应的css中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否隐藏	true表示隐藏，false表示显示
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
@事件名	HandlerName	组件的事件	详见各组件详细文档

组件的生命周期

uni-app组件的生命周期与Vue组件的生命周期一致：

beforeCreate：组件实例被创建之前
created：组件实例已经创建完成
beforeMount：组件挂载到页面之前
mounted：组件挂载到页面之后
beforeUpdate：组件更新之前
updated：组件更新之后
beforeDestroy：组件销毁之前
destroyed：组件销毁之后

组件的数据绑定

uni-app组件的数据绑定与Vue的数据绑定一致，支持插值表达式、指令等：

vue

<template>
  <view>
    <text>{{ message }}</text>
    <view v-if="showMessage">条件渲染的内容</view>
    <view v-for="(item, index) in list" :key="index">{{ item }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uni-app',
      showMessage: true,
      list: ['项目1', '项目2', '项目3']
    }
  }
}
</script>

组件的事件处理

uni-app组件的事件处理与Vue的事件处理一致，使用@或v-on绑定事件：

vue

<template>
  <view>
    <button @click="handleClick">点击我</button>
    <input @input="handleInput" v-model="inputValue" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    handleClick(event) {
      console.log('按钮被点击了', event);
    },
    handleInput(event) {
      console.log('输入内容：', this.inputValue);
    }
  }
}
</script>

自定义组件

除了使用内置组件外，uni-app还支持自定义组件，方式与Vue组件的开发方式一致：

创建一个.vue文件
在需要使用的页面中导入并注册该组件
在模板中使用该组件

vue

<!-- CustomComponent.vue -->
<template>
  <view class="custom-component">
    <text>{{ title }}</text>
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'CustomComponent',
  props: {
    title: {
      type: String,
      default: '默认标题'
    }
  }
}
</script>

<style>
.custom-component {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
</style>

使用自定义组件：

vue

<template>
  <view>
    <custom-component title="自定义组件标题">
      <text>这是插槽内容</text>
    </custom-component>
  </view>
</template>

<script>
import CustomComponent from '@/components/CustomComponent.vue'

export default {
  components: {
    CustomComponent
  }
}
</script>

组件的平台差异

虽然uni-app的组件是跨平台的，但在不同平台上可能存在一些差异，主要体现在：

组件的外观样式
组件的特有属性
组件的事件行为

在开发过程中，可以使用条件编译来处理平台差异：

vue

<template>
  <view>
    <!-- #ifdef APP-PLUS -->
    <text>这段内容只在App中显示</text>
    <!-- #endif -->
    
    <!-- #ifdef MP-WEIXIN -->
    <text>这段内容只在微信小程序中显示</text>
    <!-- #endif -->
    
    <!-- #ifndef H5 -->
    <text>这段内容在除了H5之外的平台显示</text>
    <!-- #endif -->
  </view>
</template>

组件概述 ​

uni-app组件系统介绍 ​

组件分类 ​

基础组件 ​

表单组件 ​

导航组件 ​

媒体组件 ​

地图组件 ​

画布组件 ​

开放能力组件 ​

组件使用方式 ​

组件通用属性 ​

组件的生命周期 ​

组件的数据绑定 ​

组件的事件处理 ​

自定义组件 ​

组件的平台差异 ​

扩展阅读 ​