|
文 | HustWolf 小程序的視圖層，分為 WXML、WXSS 和基礎(chǔ)組件。今天，我們就來詳細(xì)解析 WXML 和 WXSS。 WXML（WeiXin Markup Language）是為小程序 MINA 框架設(shè)計的語言，它結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)。說的通俗一點(diǎn)，WXML 有點(diǎn)類似 HTML，相當(dāng)于一個最后的收尾的設(shè)計師。它可以告訴你，這個地方要有個圖片，然后這個圖片的地址是什么；然后告訴你這兒有個按鈕，這個按鈕控制什么的開關(guān)。這么一說，我還覺得做小程序就像蓋房子，有人負(fù)責(zé)給房子打通各種通道（JavaScript）、有人負(fù)責(zé)給房子規(guī)定布局（JSON、WXSS）、還有的就是接通各個地方的線路的人（WXML）。它的意思是在視圖上規(guī)定動態(tài)變量，并在 JavaScript 腳本中進(jìn)行定義它。在這個例子中，數(shù)據(jù)來源是 JS 文件里面的 motto 變量，至于樣式，則是 user-motto 的。同時，在相應(yīng)的 JS 文件中，定義了一個變量 motto。最后在 WXSS 里，為它寫個樣式，動態(tài)的數(shù)據(jù)就能展示在視圖上了。網(wǎng)頁設(shè)計師看到這兒，也許會覺得似曾相識。沒錯，微信小程序中的 WXSS 文件，與 CSS 非常類似；而小程序的開發(fā)語言，就是照搬了 HTML+CSS+Javascript 的樣子。先在相應(yīng)的 JavaScript 中，定義一個列表變量，然后在 WXML 中，我們可以使用 wx:for 來引用它。由于不能在原本的 data 里面定義一個 array 變量，所以我定義了一個新的 data，并把 motto 放進(jìn)去。然后在 WXML 中，將某個視圖連接到相應(yīng)列表變量中：在小程序中，我們可以使用 wx:if 來設(shè)定渲染判斷條件。如果符合，則渲染某一部分內(nèi)容。使用這個函數(shù)，與其他語言中使用 if 函數(shù)來 print 東西一樣。然后，在相應(yīng)的腳本代碼里，定義你所需要的一些變量：
之后，視圖層就會根據(jù)條件，選擇渲染的部分了。
4. 模板 模板的意思是，在 WXML 中，引用相同或類似的部分。一個模板需要在 WXML 中定義和使用，引用 JS 數(shù)據(jù)，然后展示給用戶。事件是視圖層到邏輯層的通訊方式，它可以將用戶的行為反饋到邏輯層進(jìn)行處理。事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)。事件對象可以攜帶額外信息，如 id、dataset、touches。在 WXML 中建立一個事件，當(dāng)于其他編程語言中使用函數(shù)的過程。原文中建立的是一個 view，我覺得這種需要輸入的地方還是采用一個 button 按鈕比較好。首先，在 WXML 中定義需要觸發(fā)事件的元素：在 JS 腳本文件文件里面寫入方法（函數(shù)），并且綁定其中某個數(shù)據(jù)：WXML 提供兩種文件引用方式，分別是 import 和 include。import 可以在該文件中使用目標(biāo)文件定義的 template。例如，我們可以在 item.wxml 中定義了一個叫 item 的 template，并在 index.wxml 中引用了 item.wxml，那么就可以在 index.wxml 中，使用 item 模板。
而 include 可以將目標(biāo)文件除了 include 位置。例如：
WXSS（WeiXin Style Sheets）是小程序的樣式語言，用于描述 WXML 的組件樣式。WXSS 用來決定 WXML 的組件應(yīng)該怎么顯示。簡單來說，就是告訴瀏覽器，這個地方的這個東西長啥樣、比如字體多大、背景顏色是啥，是純粹的樣式文件。就好比是裝修的師傅，不管你的房子結(jié)構(gòu)布局如何，反正給你粉刷一遍。這會讓你的房子大變樣，但是沒有改變?nèi)魏文愕脑懈窬帧?/section>為了適應(yīng)廣大的前端開發(fā)者， WXSS 具有 CSS 大部分特性。 同時為了更適合開發(fā)微信小程序，對 CSS 進(jìn)行了擴(kuò)充以及修改。與 CSS 相比，WXSS 擴(kuò)展的特性有「尺寸單位」和「樣式導(dǎo)入」兩項(xiàng)。rpx（responsive pixel）是一個可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)的單位，它將屏幕寬度規(guī)定為 750 rpx。如在 iPhone6 上，屏幕寬度為 375 px，共有 750 個物理像素，則 750 rpx = 375 px = 750 物理像素，1 rpx = 0.5 px = 1 物理像素。就是說，不管你的屏幕多大，寬度都是 750 個 rpx。這是一種絕對的大小，至于具體的每個 rpx 有多大，那就要根據(jù)你的手機(jī)具體尺寸來算。這樣一個好處就是，我可以直接的指定一個部件出現(xiàn)在哪個位置，而不用管你的手機(jī)是什么樣子，確保了最好的視覺體驗(yàn)，至于 1 rpx 等于多少像素，那就要按照你的手機(jī)實(shí)際尺寸來算了。以 iPhone 為標(biāo)準(zhǔn)的換算方式如下：本文由知曉程序授權(quán)轉(zhuǎn)載，關(guān)注微信號 zxcx0101，在知曉程序后臺回復(fù)「1228」獲得全網(wǎng)第一本《小程序入門指南》電子書。
|
