【原】構(gòu)建welcome頁(yè)面的元素和樣式

美顏誘惑 2022-05-26 發(fā)布于河北

展開(kāi)全文

構(gòu)建welcome頁(yè)面的元素和樣式

我們僅僅正確地加載和顯示了welcome頁(yè)面,，還沒(méi)有編寫任何頁(yè)面代碼。在本小節(jié)中,，將嘗試為welcome頁(yè)面添加一些標(biāo)簽元素,。

創(chuàng)建的welcome.wxml文件，在該文件中鍵入以下代碼,，這段代碼將welcome頁(yè)面所需要的標(biāo)簽元素全部填入到頁(yè)面源文件中,。

這段代碼總共使用了3個(gè)微信小程序的組件，分別是view,、text和image組件,。view組件通常作為容器來(lái)使用，類似于HTML中的div標(biāo)簽,；text組件用來(lái)顯示一段文本,，類似于HTML中的span標(biāo)簽,，本例中第一個(gè)text組件用來(lái)顯示一段文本“Hello，桔子罐頭”,；而image組件用來(lái)顯示一張圖片,，類似于HTML中的img標(biāo)簽。

大家應(yīng)該注意到了,，筆者在描述這些元素時(shí)的用詞區(qū)別,。描述wxml元素使用的是“組件”，而描述HTML元素使用的是“標(biāo)簽”,，這是符合規(guī)范稱呼的,。HTML是標(biāo)記語(yǔ)言，它的標(biāo)簽主要是用來(lái)標(biāo)記頁(yè)面骨架,，標(biāo)簽的屬性也比較少,。但組件不同，組件除了標(biāo)記的作用,，它的屬性一般也是非常豐富的,。小程序官方文檔中也將view、text,、image稱為組件,，而并沒(méi)有稱為標(biāo)簽。

同HTML中的img標(biāo)簽一樣,，image組件需要設(shè)置一個(gè)src屬性,，該屬性指向一張圖片的路徑，用來(lái)顯示該圖片,。我們?cè)陧?xiàng)目的根目錄下新建一個(gè)名為images的目錄,，用來(lái)存放OrangeCan的所有圖片資源。在images目錄下新建avatar目錄,，然后將一些適合做頭像的圖片拷貝到avatar目錄中,。

如何將圖片放入到小程序的目錄中？微信Web開(kāi)發(fā)者工具無(wú)法通過(guò)Ctrl+C,、Ctrl+V的功能復(fù)制粘貼圖片,，也沒(méi)有提供導(dǎo)入圖片的功能。我們需要在操作系統(tǒng)中打開(kāi)項(xiàng)目的目錄,，并將圖片拷貝到對(duì)應(yīng)的avatar文件夾中,，小程序會(huì)自動(dòng)刷新目錄，并在開(kāi)發(fā)工具中顯示這些圖片,。

以上操作完成后,，我們的過(guò)程目錄將變成

現(xiàn)在在image組件中加入屬性src：

當(dāng)保存項(xiàng)目后，模擬器立刻會(huì)出現(xiàn)這張圖片，但圖片顯示的高寬并不是圖片本身的高寬,。它被MINA框架設(shè)置成了寬度300px,、高度225px，這也是小程序默認(rèn)的圖片高寬,。如果我們不顯示地指定圖片高寬,，所有圖片都將保持這個(gè)默認(rèn)值。

相對(duì)路徑與絕對(duì)路徑在小程序中同樣有相對(duì)路徑和絕對(duì)路徑的區(qū)別,。上面我們?cè)谠O(shè)置image組件的src屬性時(shí),，使用的是絕對(duì)路徑，它以“/”開(kāi)頭,，“/”代表根目錄,。我們也可以使用相對(duì)路徑來(lái)為image指定圖片路徑，比如,，將代碼中image組件的src屬性改寫為相對(duì)路徑：<image src="../../images/avatar/avatar-1.png"></image>路徑中的“..”表示向上一級(jí),。這里由于使用絕對(duì)路徑更加簡(jiǎn)潔，所以我們使用絕對(duì)路徑,。

代碼中間部分使用一個(gè)view組件包裹一個(gè)“開(kāi)啟小程序之旅”的text組件來(lái)實(shí)現(xiàn)按鈕部分,。由于還沒(méi)有編寫樣式，所以暫時(shí)它還不能呈現(xiàn)為一個(gè)按鈕的形狀,。

現(xiàn)在來(lái)編寫welcome頁(yè)面的樣式,。小程序編寫樣式的語(yǔ)言就是CSS，我們應(yīng)該將CSS代碼寫在頁(yè)面的wxss文件中,。在編寫welcome.wxss文件之前,，首先在welcome.wxml文件中給每個(gè)需要樣式的組件加入樣式名稱class name。