檢視層

• MINA的檢視層由WXML與WXSS編寫。
• 將邏輯層的資料反應成檢視，同時將檢視層的事件傳送給邏輯層。
• WXML(WeiXin Markup language)用於描述頁面的結構。
• WXSS(WeiXin Style Sheet)用於描述頁面的樣式。
  元件(Component)是檢視的基本組成單元。

WXML

資料繫結

• WXML中的動態資料均來自對應Page的data。
• 資料繫結使用”Mustache”語法（雙大括號）將變數包起來
• 支援運算
  
  • 算數運算
  • 三元運算
  • 邏輯運算
  • 字串運算
  • 資料路徑運算
• 組合
  
  • 陣列
    
    • <view wx:for-items="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
  • 物件
    
    • <template is="objectCombine" data="{{for: a, bar: b}}"></template>
  • …拓展運算子:將一個物件展開,複製到一個新的物件
    
    • <template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
 

  }
})

列表渲染

• 在元件上使用wx:for控制屬性繫結一個數組，即可使用陣列中各項的資料重複渲染該元件。
• 使用wx:for-item可以指定陣列當前元素的變數名
• 使用wx:for-index可以指定陣列當前下標的變數名
  
  • -後面是名
• 可以巢狀
• wx:key如果列表中專案的位置會動態改變或者有新的專案新增到列表中，並且希望列表中的專案保持自己的特徵和狀態（如<input/>中的輸入內容，<switch/> 的選中狀態），需要使用wx:key來指定列表中專案的唯一的識別符號。

<!--wxml-->
<view wx:for-items
 
="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

條件渲染

• 在MINA中，我們用wx:if="{{condition}}"來判斷是否需要渲染該程式碼塊
• wx:elif="{{}}",wx:else="{{}}"
• 如果我們想一次性判斷多個元件標籤，我們可以使用一個<block/>標籤將多個元件包裝起來，並在上邊使用wx:if控制屬性。
• <block/>並不是一個元件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。
• wx:if vs hidden

因為wx:if之中的模板也可能包含資料繫結，所有當wx:if的條件值切換時，MINA有一個區域性渲染的過程，因為它會確保條件塊在切換時銷燬或重新渲染。
同時wx:if也是惰性的，如果在初始渲染條件為false，MINA什麼也不做，在條件第一次變成真的時候才開始區域性渲染。
相比之下，hidden就簡單的多，元件始終會被渲染，只是簡單的控制顯示與隱藏。
一般來說，wx:if有更高的切換消耗而hidden有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用hidden更好，如果在執行時條件不大可能改變則wx:if較好。

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA IS NOT APP </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

模版

• 使用name屬性，作為模板的名字。然後在內定義程式碼片段
• 使用is屬性，宣告需要的使用的模板，然後將模板所需要的data傳入
• is屬性可以使用Mustache語法，在執行時來決定具體需要渲染哪個模板
• 模板擁有自己的作用域，只能使用data傳入的資料。

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

事件

• 事件是檢視層到邏輯層的通訊方式。
• 事件可以將使用者的行為反饋到邏輯層進行處理。
• 事件可以繫結在元件上，當達到觸發事件，就會執行邏輯層中對應的事件處理函式。
• 事件物件可以攜帶額外資訊，如id, dataset, touches。

• WXML的冒泡事件列表：

  型別	觸發條件
  touchstart	手指觸控
  touchmove	手指觸控後移動
  touchcancel	手指觸控動作被打斷，如來電提醒，彈窗
  touchend	手指觸控動作結束
  tap	手指觸控後離開
  longtap	手指觸控後，超過350ms再離開

  注：除上表之外的其他元件自定義事件都是非冒泡事件，如的submit事件，的input事件，的scroll事件，(詳見各個元件)

• 事件繫結
  
  • bind事件繫結不會阻止冒泡事件向上冒泡
  • catch事件繫結可以阻止冒泡事件向上冒泡。

• 事件物件

  • 如無特殊說明，當元件觸發事件時，邏輯層繫結該事件的處理函式會收到一個事件物件。

  屬性	型別	說明
  type	String	事件型別
  timeStamp	Integer	事件生成時的時間戳,該頁面開啟到觸發事件所經過的毫秒數。
  target	Object	觸發事件的元件的一些屬性值集合,觸發事件的源元件。
  currentTarget	Object	當前元件的一些屬性值集合,事件繫結的當前元件。
  touches	Array	觸控事件，觸控點資訊的陣列,touches 是一個數組，每個元素為一個 Touch 物件（canvas 觸控事件中攜帶的 touches 是 CanvasTouch 陣列）。 表示當前停留在螢幕上的觸控點。
  detail	Object	額外的資訊.

<!--wxml-->
<view bindtap="add"> {{count}} </view>

Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      data: this.data.count + 1
    })
  }
})

引用

• WXML提供兩種檔案引用方式import和include。
• import可以在該檔案中使用目標檔案定義的template

import的作用域

• import有作用域的概念，即只會import目標檔案中定義的template，而不會import目標檔案import的template
• 如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的emplate，但是C不能使用A定義的template

include

• include可以將目標檔案除了<template/>的整個程式碼引入，相當於是拷貝到include位置

wxss

• WXSS(WeiXin Style Sheets)是MINA框架設計的一套樣式語言，用於描述WXML的元件樣式。
• WXSS用來決定WXML的元件應該怎麼顯示。
• WXSS具有CSS大部分特性

尺寸單位

• rpx：可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在iPhone6上，螢幕寬度為375px，共有750個物理畫素，則750rpx = 375px = 750物理畫素，1rpx = 0.5px = 1物理畫素。
• rem：規定螢幕寬度為20rem；1rem = (750/20)rpx 。

樣式匯入

使用@import語句可以匯入外聯樣式表，@import後跟需要匯入的外聯樣式表的相對路徑，用;表示語句結束。

@import 'style.wxss';

內聯樣式

• MINA元件上支援使用style、class屬性來控制組件的樣式。
• style接收動態的樣式,靜態的樣式寫到wxss檔案中
• 動態的樣式寫到wxss中

選擇器