3-1 官方文檔整理-視圖層-WXML文件
【視圖層文件組成】：
視圖層由 WXML 與 WXSS 編寫，由組件來進行展示。
WXML(WeiXin Markup language) 用於描述頁面的結構。
WXS(WeiXin Script) 是小程序的一套腳本語言，結合 WXML，可以構建出頁面的結構。
WXSS(WeiXin Style Sheet) 用於描述頁面的樣式。
【WXML】
【數據綁定】：數據綁定語法：使用雙大括號將需要替換的對象括起來，下面的代碼，界面文件中的{{message}}會替換為"Hello MINA".(莫非騰訊小程序還有個日漫迷？)
{{表達式}}：{{}} 框架會計算{{}}中表達式的值！
{{...item}}： ... 表示將 item 展開？（感覺再用Python）
當綁定的對象是值類型時，直接用值替換
當綁定的對象是字典類型是，用視圖文件中{{}}中間的值做鍵，此鍵值對應的value，填入視圖文件中對應的位置。
1 <!--wxml--> 2 <view> {{message}} </view>
1 Page({ 2 data: { 3 message: ‘Hello MINA!‘ 4 } 5 })
【列表渲染】-其實也是綁定。下面代碼中，會生成5行 <view></view>，依次填入不同的內容、
1 <!--wxml--> 2 <view wx:for="{{array}}"> {{item}} </view>
1 // page.js 2 Page({ 3 data: { 4 array: [1, 2, 3, 4, 5] 5 } 6 })
【】
1 在組件上使用 wx:for 控制屬性綁定一個數組 2 使用 wx:for-item 可以指定數組當前元素的變量名 3 使用 wx:for-index 可以指定數組當前下標的變量名
【條件渲染】，當wx:if 之後的條件成立時，才生成<view></view>代碼（類似於條件編譯？），此例中，view == MINA，只生成 <view> MINA </view>
<view wx:if="{{view == ‘WEBVIEW‘}}"> WEBVIEW </view>
<view wx:elif="{{view == ‘APP‘}}"> APP </view>
<view wx:else="{{view == ‘MINA‘}}"> MINA </view>
1 // page.js 2 Page({ 3 data: { 4 view: ‘MINA‘ 5 } 6 })
【wx:if與hidden】
因為 wx:if 之中的模板也可能包含數據綁定，所以當 wx:if 的條件值切換時，框架有一個局部渲染的過程，因為它會確保條件塊在切換時銷毀或重新渲染。
同時 wx:if 也是惰性的，如果在初始渲染條件為 false，框架什麽也不做，在條件第一次變成真的時候才開始局部渲染。
相比之下，hidden 就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。
一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。
---------------------------------------------
【模板】
WXML文件中定義模板：
1 <!--wxml--> 2 <template name="staffName"> 3 <view> 4 FirstName: {{firstName}}, LastName: {{lastName}} 5 </view> 6 </template>
WXML文件中使用模板：
1 <template is="staffName" data="{{...staffA}}"></template> 2 <template is="staffName" data="{{...staffB}}"></template> 3 <template is="staffName" data="{{...staffC}}"></template>
JS文件中註冊數據：
// page.js Page({ data: { staffA: {firstName: ‘Hulk‘, lastName: ‘Hu‘}, staffB: {firstName: ‘Shang‘, lastName: ‘You‘}, staffC: {firstName: ‘Gideon‘, lastName: ‘Lin‘} } }
【事件】事件分為冒泡事件和非冒泡事件：
- 冒泡事件：當一個組件上的事件被觸發後，該事件會向父節點傳遞。
- 非冒泡事件：當一個組件上的事件被觸發後，該事件不會向父節點傳遞。
綁定語法：
1 <view id="outer" bindtap="handleTap1"></view> 2 3 <view id="middle" catchtap="handleTap2"></view> 4 5 <view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2"> 6 7 <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
【事件的捕獲階段】：觸摸類事件支持捕獲階段。捕獲階段位於冒泡階段之前，且在捕獲階段中，事件到達節點的順序與冒泡階段恰好相反。需要在捕獲階段監聽事件時，可以采用capture-bind、capture-catch關鍵字，後者將中斷捕獲階段和取消冒泡階段。
【事件對象】：當組件觸發事件時，邏輯層綁定該事件的處理函數會收到一個事件對象，詳細請參考文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
【引用】：重復利用界面文件
import：只會 import 目標文件中定義的 template，而不會 import 目標文件 import 的 template
include：可以將目標文件除了 <template/> <wxs/> 外的整個代碼引入，相當於是拷貝到 include 位置
3-1 官方文檔整理-視圖層-WXML文件