3.2 視圖層

視圖層主要負責視圖的顯示，WXML頁面、WXSS樣式表和組件都是視圖層的內容。

3.2.1 WXML

WXML的全稱是WeiXin Markup Language（微信標記語言），類似于HTML，也是一種使用<標簽>和</標簽>構建頁面結構的語言。

WXML具有數(shù)據(jù)綁定、列表渲染、條件渲染、模板、事件和引用的功能。

1 數(shù)據(jù)綁定

1）簡單綁定

在WXML頁面中可以使用{{變量名}}的形式表示動態(tài)數(shù)據(jù)。例如：

<view>{{msg}}<view>

此時WXML頁面上不會顯示msg這個詞，而是會顯示這個變量對應的值。動態(tài)數(shù)據(jù)的值都來自JS文件的data屬性中的同名變量。例如：

上述代碼會把“你好！”渲染到WXML頁面上{{msg}}出現(xiàn)的地方。

2）組件屬性綁定

組件的屬性也可以使用動態(tài)數(shù)據(jù)，例如組件的id、class等屬性值。

WXML頁面的相關代碼如下：

<view id='{{id}}'>測試</view>

JS文件的相關代碼如下：

3）控制屬性綁定

控制屬性也可以使用動態(tài)數(shù)據(jù)，但必須在引號內。

WXML頁面的相關代碼如下：

<view wx:if='{{condition}}'>測試</view>

JS文件的相關代碼如下：

上述代碼表示測試組件不被顯示出來。

4）關鍵字綁定

如果直接在引號內寫布爾值也必須用雙花括號括起來，例如：

1. <view wx:if='{{false}}'>測試1</view>
2. <view wx:if='{{true}}'>測試2</view>

5）運算綁定

在雙花括號內部還可以進行簡單的運算，其支持的運算有三元運算、算術運算、邏輯判斷、字符串運算和數(shù)據(jù)路徑運算。

三元運算的示例代碼如下：

算術運算的示例代碼如下：

雙花括號內的a+b會進行算術運算，但是注意括號外面的＋會原封不動地顯示出來，不起任何算術運算作用。

邏輯判斷的示例代碼如下：

此時，判斷x>5返回true，因此wx:if條件成立。

字符串運算的示例代碼如下：

此時，雙花括號中的“+”號起到了連接前后字符串的作用。

數(shù)據(jù)路徑運算的示例代碼如下：

6）組合綁定

用戶還可以在雙花括號內直接進行變量和值的組合，構成新的對象或者數(shù)組。

數(shù)組組合的示例代碼如下：

上述代碼中的x會被替換成數(shù)字3，從而形成數(shù)組[1,2,3,4]。

對象組合的示例代碼如下：

上述代碼最終會組合出對象{username: 'admin', password: '123456'}。其中，WXML代碼部分使用了<template>標簽，該標簽可以用于定義模板。

用戶也可以使用“…”符號將對象內容展開顯示，示例代碼如下：

上述代碼最終會組合出對象{ stuID:'123', stuName:'張三', gender: 2}。

如果對象中元素的key和value名稱相同，可以省略表達。示例代碼如下：

上述代碼最終會組合出對象{x: '123', y: '456'}。以上幾種方式可以隨意組合。

如果存在相同的key名稱，后者會覆蓋前者的內容。示例代碼如下：

上述代碼最終會組合出對象{x:1, y:6, z:3}。

2 列表渲染

1）簡單列表

小程序在組件上使用wx:for屬性實現(xiàn)列表渲染，即同一個組件批量出現(xiàn)多次，內容可以不同。其原理是使用wx:for綁定一個數(shù)組，然后就可以自動用數(shù)據(jù)中的每個元素依次渲染該組件，形成批量效果。

例如：

運行結果等同于：

1. <view>學生0：張三</view>
2. <view>學生1：李四</view>
3. <view>學生2：王五</view>

在以上代碼中，index是數(shù)組當前項下標默認的變量名，item是數(shù)組當前項默認的變量名。

用戶也可以使用wx:for-item和wx:for-index自定義當前元素和下標的變量名。將上面示例代碼的WXML部分修改如下：

能得到完全一樣的運行結果。

需要注意的是，wx:for引號中數(shù)組的雙花括號不可以沒有，如果直接填寫數(shù)組變量名會被拆解為字符的形式。例如：

<view wx:for='array'>學生{{index}}：{{item}}</view> <!--array會被拆解為'a','r', 'r',
'a', 'y'-->

運行結果等同于：

1. <view>學生0：a</view>
2. <view>學生1：r</view>
3. <view>學生2：r</view>
4. <view>學生3：a</view>
5. <view>學生4：y</view>

顯然這不是預期效果。

2）嵌套列表

wx:for還可以嵌套出現(xiàn)，例如九九乘法口訣表的代碼如下：

3）多節(jié)點列表

用戶可以將wx:for用在<block>標簽上，以渲染一個包含多節(jié)點的結構塊。例如：

運行結果等同于：

4）wx:key屬性

前面使用wx:for的示例均會在Console控制臺得到一個warning提示，如圖3-5所示。

圖3-5 Console控制臺的warning提示

上述提示的大致內容是建議用戶使用wx:key屬性提高wx:for的性能表現(xiàn)。

這是由于如果列表中的項目位置會動態(tài)改變或者有新的項目添加到列表中，可能導致列表亂序。如果用戶明確地知道該列表是靜態(tài)的或者順序不重要，可以選擇忽略該提示。

若要避免亂序的情況或不想看到該提示，可以使用wx:key屬性指定列表中的項目唯一標識符。wx:key的值以下面兩種形式提供。

?　字符串：代表在wx:for循環(huán)數(shù)組中的一個項目屬性，該屬性值需要是列表中唯一的字符串或數(shù)字，且不能動態(tài)改變。

?　保留關鍵字*this：代表在wx:for循環(huán)中的項目本身，這種表示需要項目本身是唯一的字符串或者數(shù)字。

這里以wx:key屬性為自定義字符串為例，代碼如下：

1. <view wx:for="{{[ '張三', '李四', '王五']}}" wx:key='stu{{index}}'>
2.   <view>學生{{index}}：{{item}} </view>
3. </view>

運行結果等同于：

1. <view>學生0：張三</view>  <!--wx:key='stu0'-->
2. <view>學生1：李四</view>  <!--wx:key='stu1'-->
3. <view>學生2：王五</view>  <!--wx:key='stu2'-->

當數(shù)據(jù)改變導致頁面被重新渲染時會自動校正帶有key的組件，以確保項目被正確排序并且提高列表渲染時的效率。

3 條件渲染

1）簡單條件

在小程序框架中使用wx:if="{{condition}}"判斷是否需要渲染該代碼塊。例如：

上述代碼表示測試組件可以被顯示出來，如果condition的值為false，則該組件無法顯示。

用戶也可以組合使用0~N個wx:elif加上一個wx:else添加其他條件，代碼如下：

由于x>5不成立，A組件不被顯示；x>2成立，B組件被顯示并且直接忽略C組件。

2）多節(jié)點條件

如果要一次性判斷多個組件標簽，可以使用<block>標簽將多個組件包裝起來，并在<block>上使用wx:if控制屬性。例如：

1. <block wx:if="{{true}}">
2.   <view> view1 </view>
3.   <view> view2 </view>
4. </block>

此時可以同時控制view1和view2的顯示與隱藏。

3）wx:if與hidden

讀者通過學習可以發(fā)現(xiàn)，wx:if和hidden屬性都可以規(guī)定組件的顯示和隱藏效果。這兩種屬性的對比如表3-13所示。

表3-13 wx:if與hidden屬性的對比

綜上所述，如果需要頻繁地切換組件，用hidden更好；如果在運行時條件很少發(fā)生改變，則wx:if更好。開發(fā)者可以根據(jù)實際需要選擇其中一種屬性或兩種組合使用。

4 模板

小程序框架允許在WXML文件中提供模板（template），模板可以用于定義代碼片段，然后在不同的頁面被重復調用。

1）定義模板

小程序使用<template>在WXML文件中定義代碼片段作為模板使用，每個<template>都使用name屬性自定義模板名稱。例如：

上述代碼表示制作了一個名稱為myTemp的模板，該模板包含了一個<view>組件，其內部帶有兩個<text>組件，分別用于表示姓名和年齡，其中name和age可以動態(tài)變化。

2）使用模板

在新的WXML頁面繼續(xù)使用<template>標簽就可以引用模板內容了，引用的<template>標簽必須帶有is屬性，該屬性值用于指定正確的模板名稱才能成功引用，然后使用data屬性將模板所需要的數(shù)據(jù)值傳入。例如：

模板擁有自己的作用域，只能使用data傳入的數(shù)據(jù)。上述代碼表示引用name為myTemp的模板，并且姓名和年齡分別更新為張三和20。

5 事件

事件是視圖層到邏輯層的通信方式，有以下特點：

?　可以將用戶的行為反饋到邏輯層進行處理；

?　可以綁定在組件上，當觸發(fā)事件時就會執(zhí)行邏輯層中對應的事件處理函數(shù)；

?　對象可以攜帶額外信息，例如id、dataset、touches。

1）事件的使用方式

首先需要在WXML頁面為組件綁定一個事件處理函數(shù)，例如：

<button id="myBtn" bindtap="myTap" data-my="hello">按鈕組件</button>

上述代碼表示為按鈕綁定了一個觸摸單擊事件，用手指觸摸后將執(zhí)行自定義函數(shù)myTap()。其中data-*為事件附加屬性，可以由用戶自定義或省略不寫。

然后必須在對應的JS文件中添加同名函數(shù)，若函數(shù)不存在，則會在觸發(fā)時報錯。例如：

運行代碼，然后觸摸單擊該按鈕，Console控制臺輸出的內容如圖3-6所示。

圖3-6 觸發(fā)tap事件時Console控制臺輸出的內容

展開輸出內容前面的箭頭可以查看詳情，整理后節(jié)選信息如下：

由此可見輸出的事件對象包含了按鈕的id名稱、附屬的data-my屬性值、坐標位置、事件類型等信息。例如想獲得data-my中的數(shù)據(jù)值，可以描述為e.currentTarget.dataset.my，開發(fā)者之后可以利用這些信息進行后續(xù)的代碼編寫。

2）事件的分類

事件分為冒泡事件和非冒泡事件，說明如下。

?　冒泡事件：當一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點傳遞。

?　非冒泡事件：當一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞。

WXML中支持的冒泡事件如表3-14所示。

表3-14 WXML中支持的冒泡事件

3）事件綁定和冒泡

事件綁定的寫法與組件的屬性描述相同，均是以key=value的形式，說明如下。

?　key：以bind或catch開頭，然后跟事件的類型，例如bindtap、catchtouchstart。自基礎庫版本1.5.0起，bind和catch后可以緊跟一個冒號，其含義不變，例如bind:tap、catch:touchstart。

?　value：一個字符串，需要在對應的Page中定義同名的函數(shù)。

bind事件和catch事件的區(qū)別是，bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

例如有3個<view>組件A、B、C，其中A包含B、B包含C，代碼如下：

此時如果單擊C組件會觸發(fā)tap3，然后tap事件會向上冒泡至父節(jié)點View B導致觸發(fā)tap2，但由于B組件使用的是catchtap，所以阻止了tap事件繼續(xù)冒泡；如果單擊了B組件會觸發(fā)tap2；單擊A組件會觸發(fā)tap1。

4）事件的捕獲階段

自基礎庫版本1.5.0起，觸摸類事件支持捕獲階段，可以在組件的冒泡事件被觸發(fā)之前進行事件的捕獲，使其無法冒泡。捕獲階段事件的順序與冒泡階段完全相反，是由外向內進行捕獲。

事件捕獲的寫法是capture-bind（或capture-catch）:key=value的形式，說明如下。

?　capture-bind：在冒泡階段之前捕獲事件。

?　capture-catch：在冒泡階段之前捕獲事件，并且取消冒泡階段和中斷捕獲。

?　key：事件的類型，例如tap、touchstart等，但只能是觸摸類事件。

?　value：一個字符串，需要在對應的Page中定義同名的函數(shù)。

例如有兩個<view>組件A和B，其中A包含B，代碼如下：

如果單擊組件B會先后調用tap2、tap4、tap3和tap1。這是由于捕獲優(yōu)先級大于冒泡，且由外向內，所以會首先觸發(fā)tap2然后是tap4。捕獲階段結束后由內向外觸發(fā)冒泡事件，因此接著觸發(fā)的是tap3最后是tap1。

5）事件對象詳解

事件對象可以分為基礎事件（BaseEvent）、自定義事件（CustomEvent）和觸摸事件（TouchEvent）。事件對象所包含的具體屬性如表3-15所示。

表3-15 事件參數(shù)

基礎事件對象中的target和currentTarget屬性包含的參數(shù)相同，如表3-16所示。

表3-16 target和currentTarget參數(shù)

其中dataset只能接受data-*的傳遞形式，例如：

<button bindtap="myTap" data-test="hello">按鈕組件</button>

觸發(fā)事件后dataset所獲得的集合就是{test: "hello"}。

如果描述多個詞用連字符（-）連接，會被強制轉換為駝峰標記法（又稱為Camel標記法，特點是第一個單詞全部小寫，后面每個單詞只有首字母大寫），例如：

<button bindtap="myTap" data-my-test="hello">按鈕組件</button>

觸發(fā)事件后dataset所獲得的集合就是{myTest: "hello"}。

如果同一個詞里面有大寫字母，會被強制轉換為小寫字母，例如：

<button bindtap="myTap" data-myTest="hello">按鈕組件</button>

觸發(fā)事件后dataset所獲得的集合就是{mytest: "hello"}。

自定義事件對象中的detail屬性用于攜帶數(shù)據(jù)，不同的組件所攜帶的detail有所差異。例如表單組件的提交事件會攜帶用戶的輸入，媒體的錯誤事件會攜帶錯誤信息等，具體用法詳見第4章。

觸摸事件對象的touches是一個數(shù)組，里面每一個元素都是一個單獨的touch對象，表示當前停留在屏幕上的觸摸點，屬性如表3-17所示。

表3-17 touch對象參數(shù)

canvas觸摸事件中攜帶的touches是CanvasTouch對象形成的數(shù)組，屬性如表3-18所示。

表3-18 CanvasTouch對象參數(shù)

changeTouches屬性與touches完全相同，表示有變化的觸摸點，例如從無變有（touchstart）、位置變化（touchmove）、從有變無（touchend、touchcancel）。

6 引用

WXML提供了import和include兩種文件引用方式。

1）import

小程序可以使用<template>標簽在目標文件中事先定義好模板，然后在當前頁面使用<import>標簽引用<template>中的內容。

例如，在tmpl.wxml文件中使用<template>定義一個名稱為tmpl01的模板：

1. <template name="tmpl01">
2.   <text>{{text}}</text>
3. </template>

然后在首頁index.wxml中使用<import>引用tmpl.wxml，就可以使用tmpl01模板：

1. <import src="tmpl.wxml"/>
2. <template is="tmpl01" data="{{text: 'hello'}}"/>

此時等同于在index.wxml中顯示了：

<text>hello</text>

需要注意的是，<import>有作用域的概念，即只會引用目標文件自己定義的template，而不會引用目標文件里面用<import>引用的第三方模板。

假設有A、B、C 3個頁面，其中B import A，且C import B，那么B頁面可以使用A頁面定義的<template>模板，C頁面可以使用B頁面定義的<template>模板，但是C頁面不可以使用A頁面定義的<template>模板，即使該模板已經(jīng)被B頁面引用。

A頁面a.wxml的代碼如下：

1. <template name="A">
2.   <text> A頁面模板</text>
3. </template>

B頁面b.wxml的代碼如下：

1. <import src="a.wxml"/>
2. <template name="B">
3.   <text> B頁面模板</text>
4. </template>

C頁面c.wxml的代碼如下：

1. <import src="b.wxml"/>
2. <template is="A"/>  <!-- 引用模板失敗！C必須自己import A才可以 -->
3. <template is="B"/>  <!-- 引用模板成功！C頁面有import B -->

這是為了避免多個頁面彼此互相連接引用陷入邏輯錯誤。

2）include

小程序使用<include>將目標文件除了<template>以外的整個代碼引入，相當于把目標文件的代碼直接復制到了<include>標簽的位置。

例如為頁面制作統(tǒng)一的頁眉、頁腳，示例如下。

頁眉header.wxml的代碼：

<view>這是小程序的頁眉</view>

頁腳footer.wxml的代碼：

<view>這是小程序的頁腳</view>

首頁index.wxml的代碼：

1. <include src="header.wxml"/>
2. <view>正文部分</view>
3. <include src="footer.wxml"/>

<import>標簽更適合于統(tǒng)一樣式但內容需要動態(tài)變化的情況；<include>標簽更適合于無須改動目標文件的情況。

3.2.2 WXSS

WXSS文件的全稱是WeiXin Style Sheets（微信樣式表），這是一種樣式語言，用于描述WXML的組件樣式（例如尺寸、顏色、邊框效果等）。

為了適應廣大的前端開發(fā)者，WXSS具有CSS的大部分特性，同時為了更適合開發(fā)微信小程序，WXSS對CSS進行了擴充以及修改。與CSS相比，WXSS獨有的特性是尺寸單位和樣式導入。

1 尺寸單位

小程序規(guī)定了全新的尺寸單位rpx（responsive pixel），可以根據(jù)屏幕寬度進行自適應。其原理是無視設備原先的尺寸，統(tǒng)一規(guī)定屏幕寬度為750rpx。

rpx不是固定值，屏幕越大，1rpx對應的像素就越大。例如在iPhone6上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

常見機型的尺寸單位對比如表3-19所示。

表3-19 手機設備尺寸單位對比表

2 樣式導入

小程序在WXSS樣式表中使用@import語句導入外聯(lián)樣式表，@import后跟需要導入的外聯(lián)樣式表的相對路徑，用;表示語句結束。

例如有公共樣式表common.wxss，代碼如下：

1. .red{
2.   color:red;
3. }

然后可以在其他任意樣式表中使用@import語句對其進行引用。例如a. wxss的代碼如下：

1. @import "common.wxss";
2. .blue {
3.   color:blue;
4. }

此時，.red和.blue樣式均能被頁面a.wxml使用。

3 常用屬性

WXSS所支持的樣式屬性與CSS屬性類似，為方便讀者理解本節(jié)的示例代碼，表3-20列出了部分常用樣式屬性和參考值。

表3-20 常用樣式屬性和參考值

顏色可以用以下幾種方式表示。

?　RBG顏色：用RGB紅綠藍三通道色彩表示法，例如rgb(255,0,0)表示紅色。

?　RGBA顏色：在RGB的基礎上加上顏色透明度，例如rgba(255,0,0,0.5)表示半透明紅色。

?　十六進制顏色：又稱為HexColor，用#加上6位數(shù)字表示，例如#ff0000表示紅色。

?　預定義顏色：使用顏色英文單詞的形式表示，例如red表示紅色。小程序目前共預設了148種顏色名稱，見附錄。

4 內聯(lián)樣式

小程序允許使用style和class屬性控制組件的樣式。

1）style

style屬性又稱為行內樣式，可直接將樣式代碼寫到組件的首標簽中。例如：

<view style="color:red;background-color:yellow">測試</view>

上述代碼表示當前這個<view>組件中的文本將變?yōu)榧t色、背景將變?yōu)辄S色。

style也支持動態(tài)樣式效果，例如：

<view style="color:{{color}} ">測試</view>

上述代碼表示組件中的文本顏色將由頁面JS文件的data.color屬性規(guī)定。

官方建議開發(fā)者盡量不要將靜態(tài)的樣式寫進style中，以免影響渲染速度。如果是靜態(tài)的樣式，可以統(tǒng)一寫到class中。

2）class

小程序使用class屬性指定樣式規(guī)則，其屬性值由一個或多個自定義樣式類名組成，多個樣式類名之間用空格分隔。

例如，在test.wxss中規(guī)定了兩個樣式：

在test.wxml中代碼如下：

<view class="style01 style02">測試</view>

上述代碼表示組件同時接受.style01和.style02的樣式規(guī)則。注意，在class屬性值的引號內部不需要加上類名前面的點。

5 選擇器

小程序目前在WXSS樣式表中支持的選擇器如表3-21所示。

表3-21 選擇器

例如，在WXSS樣式表中規(guī)定：

上述代碼表示將當前頁面中所有view組件的寬度都更新為100rpx。

6 全局樣式與局部樣式

對于小程序WXSS樣式表中規(guī)定的樣式，根據(jù)其作用范圍分為兩類：在app.wxss中的樣式為全局樣式，作用于每一個頁面；在頁面WXSS文件中定義的樣式為局部樣式，只作用在對應的頁面，并會覆蓋app.wxss中相同的選擇器。

3.2.3 組件

組件是WXML頁面上的基本單位，例如小程序頁面上的按鈕、圖片、文本等都是用組件渲染出來的，詳細介紹見第4章“小程序組件”。