uni-app基礎(chǔ)組件

1. 前言

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

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

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

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

2. view 視圖容器

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

2.1 屬性說(shuō)明

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)擊后，紅色效果會(huì)保留1000毫秒。

Tips：

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

3. text 文本組件

3.1 屬性說(shuō)明

3.2 實(shí)例

<template>
	<view>
		<!-- 長(zhǎng)按文本是否可選 -->
		<view>
			<text selectable='true'>長(zhǎng)按文本可選</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> 組件，編譯時(shí)會(huì)被轉(zhuǎn)換為 <text>。
• 組件內(nèi)只支持嵌套 <text>，不支持其它組件或自定義組件，否則不同平臺(tái)會(huì)有渲染差異。
• decode 可以解析的有 < > & '。
• 除了文本節(jié)點(diǎn)以外的其他節(jié)點(diǎn)都無(wú)法長(zhǎng)按選中。

4. button 按鈕組件

4.1 屬性說(shuō)明

4.2 實(shí)例

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

效果：

Tips：

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

5. navigator 頁(yè)面鏈接

5.1 屬性說(shuō)明

5.2 實(shí)例

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

6. image 圖片組件

6.1 屬性說(shuō)明

6.2 實(shí)例

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

Tips：

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

7. 小結(jié)

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

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

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