uni-app基礎(chǔ)組件

1. 前言

組件是視圖層的基本組成單元，其實(shí)也就是我們經(jīng)常寫的 HTML 標(biāo)簽。有開始標(biāo)簽和結(jié)束標(biāo)簽的都可以理解為組件，比如 <div> </div> 、 <view> </view>。

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

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

我們可以基于這些 uni-app 組件快速搭建頁面的基礎(chǔ)結(jié)構(gòu)。下面來看看一些常用組件的應(yīng)用。

2. view 視圖容器

view 相當(dāng)于傳統(tǒng) HTML 中的 div。用來包裹各種元素內(nèi)容。

2.1 屬性說明

2.2 實(shí)例

<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>

效果：
我們把點(diǎn)擊效果設(shè)置成了紅色。點(diǎn)擊后，紅色效果會保留1000毫秒。

Tips：

• 如果不小心用了 <div> 標(biāo)簽，編譯不會報錯，會自動幫我們轉(zhuǎn)換為 <view> 標(biāo)簽。
• 如果電腦網(wǎng)頁版看不到點(diǎn)擊效果，可以將切換到手機(jī)頁面再試試。

3. text 文本組件

3.1 屬性說明

3.2 實(shí)例

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

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

Tips：

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

4. button 按鈕組件

4.1 屬性說明

4.2 實(shí)例

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

效果：

Tips：

• 按鈕設(shè)置 size 為 mini 時，可以在一行顯示多個按鈕。size 為默認(rèn)值時，會獨(dú)占一行。

5. navigator 頁面鏈接

5.1 屬性說明

5.2 實(shí)例

<template>
    <view>
		<navigator url="/pages/index/index">
			<button>保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面</button>
		</navigator>
		<navigator url="/pages/index/index" open-type="redirect" >
			<button>關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面</button>
		</navigator>
		<navigator url="/pages/index/index" open-type="switchTab">
			<button>跳轉(zhuǎn)tab頁面</button>
		</navigator>
    </view>
</template>

6. image 圖片組件

6.1 屬性說明

6.2 實(shí)例

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

Tips：

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

7. 小結(jié)

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

• 了解 uni-app 基礎(chǔ)組件與傳統(tǒng) HTML 基礎(chǔ)組件的差異；
• 掌握 uni-app 常用的基礎(chǔ)組件的用法。

了解更多組件內(nèi)容，可以查看官網(wǎng)：https://uniapp.dcloud.io/component/README