uni-app基礎組件

1. 前言

組件是視圖層的基本組成單元，其實也就是我們經常寫的 HTML 標簽。有開始標簽和結束標簽的都可以理解為組件，比如 <div> </div> 、 <view> </view>。

uni-app 開發規范不推薦使用傳統的 HTML 標簽。uni-app 框架給我們提供了一系列基礎組件，與傳統 HTML 中的基礎標簽元素類似，與小程序中的標簽元素是一樣的，更適合手機端使用。比如 div 會被 view 標簽代替，類似的還有 span 轉 text 、a 轉 navigator 等。

一開始開發會很不習慣，但很容易上手，并且我們不需要擔心弄混，如果我們不小心寫了 div 這種不符合 uni-app 開發規范的標簽，也是不會報錯的。在編譯到非H5平臺時編譯器會幫我們轉換為 view 標簽。

我們可以基于這些 uni-app 組件快速搭建頁面的基礎結構。下面來看看一些常用組件的應用。

2. view 視圖容器

view 相當于傳統 HTML 中的 div。用來包裹各種元素內容。

2.1 屬性說明

2.2 實例

<template>
	<view class="box" hover-class="click_active" :hover-start-time="100" :hover-stay-time='1000'>
	</view>
</template>

<style>
	.box {
		height: 50px;
		background:black;
	}
	.click_active {
	    background: red;
	}
</style>

效果：
我們把點擊效果設置成了紅色。點擊后，紅色效果會保留1000毫秒。

Tips：

• 如果不小心用了 <div> 標簽，編譯不會報錯，會自動幫我們轉換為 <view> 標簽。
• 如果電腦網頁版看不到點擊效果，可以將切換到手機頁面再試試。

3. text 文本組件

3.1 屬性說明

3.2 實例

<template>
	<view>
		<!-- 長按文本是否可選 -->
		<view>
			<text selectable='true'>長按文本可選</text>
		</view>

		<!-- 顯示連續空格的方式 -->
		<view>
			<!-- 中文字符空格一半大小 -->
			<view>
				<text space='ensp'>慕課網 imooc</text>
			</view>
			<!-- 中文字符空格大小 -->
			<view>
				<text space='emsp'>慕課網 imooc</text>
			</view>
			<!-- 根據字體設置的空格大小 -->
			<view>
				<text space='nbsp'>慕課網 imooc</text>
			</view>
		</view>
	</view>
</template>

Tips：

• 如果用了 <span> 組件，編譯時會被轉換為 <text>。
• 組件內只支持嵌套 <text>，不支持其它組件或自定義組件，否則不同平臺會有渲染差異。
• decode 可以解析的有 < > & '。
• 除了文本節點以外的其他節點都無法長按選中。

4. button 按鈕組件

4.1 屬性說明

4.2 實例

<button size='mini' disabled>被禁用的小按鈕</button>
<button  type='warn' loading='true'>名稱前帶有 loading 圖標的紅色按鈕</button>

效果：

Tips：

• 按鈕設置 size 為 mini 時，可以在一行顯示多個按鈕。size 為默認值時，會獨占一行。

5. navigator 頁面鏈接

5.1 屬性說明

5.2 實例

<template>
    <view>
		<navigator url="/pages/index/index">
			<button>保留當前頁面，跳轉到應用內的某個頁面</button>
		</navigator>
		<navigator url="/pages/index/index" open-type="redirect" >
			<button>關閉當前頁面，跳轉到應用內的某個頁面</button>
		</navigator>
		<navigator url="/pages/index/index" open-type="switchTab">
			<button>跳轉tab頁面</button>
		</navigator>
    </view>
</template>

6. image 圖片組件

6.1 屬性說明

6.2 實例

<template>
  <view>
    <!-- 引入存放在根文件夾static下面的imooc.png圖片，保持縱橫比縮放圖片，使圖片的長邊適應容器的寬度或高度 -->
    <image src="/static/imooc.png" mode="aspectFit"></image>
  </view>
</template>

Tips：

• <image> 組件默認寬度 300px、高度 225px；
• src 我們前面的小結講過，支持相對路徑和絕對路徑，支持 base64 碼；

7. 小結

本節課程我們主要學習了 uni-app 的一些常用基礎組件，所有組件與屬性名都是小寫，單詞之間以連字符-連接。本節課程的重點如下：

• 了解 uni-app 基礎組件與傳統 HTML 基礎組件的差異；
• 掌握 uni-app 常用的基礎組件的用法。

了解更多組件內容，可以查看官網：https://uniapp.dcloud.io/component/README