元件概述

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元件系統介紹 ​

元件分類 ​

基礎元件 ​

表單元件 ​

導航元件 ​

媒體元件 ​

地圖元件 ​

畫布元件 ​

開放能力元件 ​

元件使用方式 ​

元件通用屬性 ​

元件的生命週期 ​

元件的資料綁定 ​

元件的事件處理 ​

自訂元件 ​

元件的平台差異 ​

延伸閱讀 ​