檢視層內容

小程式的檢視層包括幾個方面的內容：WXML(WeiXin Markup language) 、WXSS(WeiXin Style Sheet) 、WXS(WeiXin Script) 、元件(Component)。

• WXML：用於描述頁面的結構。
• WXSS：用於描述頁面的樣式。
• WXS：是小程式的一套指令碼語言，結合 WXML，可以構建出頁面的結構。
• 元件：是檢視的基本組成單元。

WXML

WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎元件、事件系統，可以構建出頁面的結構。
WXML的功能有以下幾個方面：

資料繫結：WXML 中的動態資料均來自對應 Page 的 data。

1. 簡單繫結：資料繫結使用 Mustache 語法（雙大括號）將變數包起來，可以作用於：

• 內容：<view> {{ message }} </view>
• 元件屬性(需要在雙引號之內): <view id="item-{{id}}"> </view>
• 控制屬性(需要在雙引號之內): <view wx:if="{{condition}}"> </view>
• 關鍵字(需要在雙引號之內): <checkbox checked="{{false}}"> </checkbox>

2. 運算：可以在 {{}} 內進行簡單的運算，支援的有如下幾種方式：

• 三元運算：<view hidden="{{flag ? true : false}}"> Hidden </view>
• 算數運算：<view> {{a + b}} + {{c}} + d </view>
• 邏輯判斷：<view wx:if="{{length > 5}}"> </view>
• 字串運算：<view>{{"hello" + name}}</view>
• 資料路徑運算：<view>{{object.key}} {{array[0]}}</view>

3. 組合：可以在 Mustache 內直接進行組合，構成新的物件或者陣列。

• 陣列：<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
• 物件：<template is="objectCombine" data="{{for: a, bar: b}}"></template>
  js中：Page({ data: { a: 1, b: 2 } })
  最後組合成物件：{for: 1, bar: 2}
  也可以用擴充套件運算子…將一個物件展開
  <template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
  js中：Page({ data: { obj1: { a: 1, b: 2 }, obj2: { c: 3, d: 4 } } })
  最終組合成物件：{a: 1, b: 2, c: 3, d: 4, e: 5}
  如果物件的 key 和 value 相同，也可以間接地表達：<template is="objectCombine" data="{{foo, bar}}"></template>
  注意：1、上述方式可以隨意組合，但是如有存在變數名相同的情況，後邊的會覆蓋前面
  2、花括號和引號之間不能有空格，如果有空格將最終被解析成為字串
  例如：<view wx:for="{{[1,2,3]}} "> {{item}} </view>後面有空格等同於：<view wx:for="{{[1,2,3] + ' '}}"> {{item}} </view>

列表渲染

1. wx:for
   在元件上使用 wx:for 控制屬性繫結一個數組，即可使用陣列中各項的資料重複渲染該元件。
   預設陣列的當前項的下標變數名預設為 index，陣列當前項的變數名預設為 item。

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

也可以使用 wx:for-item 可以指定陣列當前元素的變數名， wx:for-index 可以指定陣列當前下標的變數名, 上式等同於：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

2. block wx:for
   類似 block wx:if，也可以將 wx:for 用在標籤上，以渲染一個包含多節點的結構塊。例如：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

3. wx:key
   wx:key 的值以兩種形式提供

• 字串，代表在 for 迴圈的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字串或數字，且不能動態改變。
• 保留關鍵字 *this 代表在 for 迴圈中的 item 本身，這種表示需要 item 本身是一個唯一的字串或者數字

條件渲染

1. wx:if
   在框架中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該程式碼塊，也可以用 wx:elif 和 wx:else 來新增一個 else 塊。

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

2. block wx:if
   因為 wx:if 是一個控制屬性，需要將它新增到一個標籤上。如果要一次性判斷多個元件標籤，可以使用一個 標籤將多個元件包裝起來，並在上邊使用 wx:if 控制屬性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意： 並不是一個元件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。
3. wx:if vs hidden
wx:if 之中的模板可能包含資料繫結，所以當 wx:if 的條件值切換時，框架有一個區域性渲染的過程，因為它會確保條件塊在切換時銷燬或重新渲染。
同時 wx:if 也是惰性的，如果在初始渲染條件為 false，框架什麼也不做，在條件第一次變成真的時候才開始區域性渲染。
相比之下，hidden 就簡單的多，元件始終會被渲染，只是簡單的控制顯示與隱藏。

模版

WXML提供模板（template），可以在模板中定義程式碼片段，然後在不同的地方呼叫。

1. 定義模板
   使用 name 屬性，作為模板的名字。然後在內定義程式碼片段，如：

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

2. 使用模板
   使用 is 屬性，宣告需要的使用的模板，然後將模板所需要的 data 傳入，如：

<template is="msgItem" data="{{...item}}"/>

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

is 屬性可以使用 Mustache 語法，來動態決定具體需要渲染哪個模板：

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
	<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

3. 模板的作用域
   模板擁有自己的作用域，只能使用 data 傳入的資料以及模板定義檔案中定義的 模組。

事件

1. 使用方式
   (1) 在元件中繫結一個事件處理函式。
   如bindtap，當用戶點選該元件的時候會在該頁面對應的Page中找到相應的事件處理函式。
   <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
   (2) 在相應的Page定義中寫上相應的事件處理函式，引數是event。Page({ tapName: function(event) { console.log(event) } })

2. 事件分類
   事件分為冒泡事件和非冒泡事件：

• 冒泡事件：當一個元件上的事件被觸發後，該事件會向父節點傳遞。
• 非冒泡事件：當一個元件上的事件被觸發後，該事件不會向父節點傳遞。
  除了手勢相關操作和動畫類操作事件，大部分事件都是非冒泡事件。

3. 事件繫結和冒泡

• 事件繫結的寫法同組件的屬性，以 key、value 的形式。key 以bind或catch開頭，然後跟上事件的型別，如bindtap。
• value 是一個字串，需要在對應的 Page 中定義同名的函式。不然當觸發事件的時候會報錯。
  區別：bind事件繫結不會阻止冒泡事件向上冒泡，catch事件繫結可以阻止冒泡事件向上冒泡。

4. 事件的捕獲
   自基礎庫版本 1.5.0 起，觸控類事件支援捕獲階段。捕獲階段位於冒泡階段之前，且在捕獲階段中，事件到達節點的順序與冒泡階段恰好相反。需要在捕獲階段監聽事件時，可以採用capture-bind、capture-catch關鍵字，後者將中斷捕獲階段和取消冒泡階段。
5. 事件物件
   如無特殊說明，當元件觸發事件時，邏輯層繫結該事件的處理函式會收到一個事件物件。

引用

WXML 提供兩種檔案引用方式import和include。

• import可以在該檔案中使用目標檔案定義的template。
• import 有作用域的概念，即只會 import 目標檔案中定義的 template，而不會 import 目標檔案 import 的 template。（即沒有傳遞性）

<template name="item">
  <text>{{text}}</text>
</template>
//另一個檔案中引用
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

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

<!-- index.wxml -->
<include src="header.wxml"/>.  //相當將header.wxml內容拷貝到這裡
<view> body </view>
<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>

WXSS

WXSS(WeiXin Style Sheets)是一套樣式語言，用於描述 WXML 的元件樣式, 用來決定 WXML 的元件應該怎麼顯示。
WXSS 具有 CSS 大部分特性，也進行了一些修改和拓展。

1. 拓展

• 尺寸單位
  rpx（responsive pixel）: 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。
• 樣式匯入
  使用@import語句可以匯入外聯樣式表，@import後跟需要匯入的外聯樣式表的相對路徑，用;表示語句結束。如：@import "common.wxss";

2. 內聯樣式
   框架元件上支援使用 style、class 屬性來控制組件的樣式。

• style：style 接收動態的樣式，在執行時會進行解析。靜態的樣式統一寫到 class 中。<view style="color:{{color}};" />
• class：用於指定樣式規則，其屬性值是樣式規則中類選擇器名(樣式類名)的集合，樣式類名不需要帶上.，樣式類名之間用空格分隔。

3. 選擇器
   目前支援的選擇器有：
4. 全域性樣式和區域性樣式
   定義在 app.wxss 中的樣式為全域性樣式，作用於每一個頁面。在 page 的 wxss 檔案中定義的樣式為區域性樣式，只作用在對應的頁面，並會覆蓋 app.wxss 中相同的選擇器。

元件

一個元件通常包括 開始標籤 和 結束標籤，屬性 用來修飾這個元件，內容 在兩個標籤之內。所有元件與屬性都是小寫，以連字元-連線
元件屬性型別有：Boolean、Number、String、Array、Object、EvenHandler（事件處理函式名）、Any（任意屬性）

WXS

WXS（WeiXin Script）是小程式的一套指令碼語言，結合 WXML，可以構建出頁面的結構。
注意：

• wxs 不依賴於執行時的基礎庫版本，可以在所有版本的小程式中執行。
• wxs 與 javascript 是不同的語言，有自己的語法，並不和 javascript 一致。
• wxs 的執行環境和其他 javascript 程式碼是隔離的，wxs 中不能呼叫其他 javascript 檔案中定義的函式，也不能呼叫小程式提供的API。
• wxs 函式不能作為元件的事件回撥。
• 由於執行環境的差異，在 iOS 裝置上小程式內的 wxs 會比 javascript 程式碼快 2 ~ 20 倍。在 android 裝置上二者執行效率無差異。
  下面是wxs的一些介紹：

1. WXS模組
   WXS 程式碼可以編寫在 wxml 檔案中的 標籤內，或以 .wxs 為字尾名的檔案內。

• 每一個 .wxs 檔案和 標籤都是一個單獨的模組。
• 每個模組都有自己獨立的作用域，一個模組的變數和函式對其他模組不可見。
• 一個模組要想對外暴露其內部的私有變數與函式，只能通過 module.exports 實現。
• module物件
  每個 wxs 模組均有一個內建的 module 物件，module物件有一個屬性exports，通過該屬性，可以對外共享本模組的私有變數與函式。
• require函式
  在.wxs模組中引用其他 wxs 檔案模組，可以使用 require 函式。
  注意：require只能引用 .wxs檔案模組，且路徑要是相對路徑；wxs 模組均為單例，多個地方引用的都是同一個wxs物件；如果一個 wxs 模組在定義之後，一直沒有被引用，則該模組不會被解析與執行。
• <wxs標籤
  wxs標籤有兩個屬性：module和src。
  module屬性：module是當前wxs標籤的模組名，必填；在單個 wxml 檔案內，名稱須唯一，否則後面的模組名會覆蓋前面的，不同檔案之間的 wxs 模組名不會相互覆蓋。
  src屬性：src 屬性可以用來引用其他的 wxs 檔案模組，和require類似，也有同樣的注意事項。
• 注意
  1、<wxs模組只能在定義模組的 WXML 檔案中被訪問到。使用 或 <import 時，<wxs 模組不會被引入到對應的 WXML 檔案中。
  2、<template 標籤中，只能使用定義該 <template 的 WXML 檔案中定義的 <wxs 模組。

2. 變數

• WXS 中的變數均為值的引用。
• 沒有宣告的變數直接賦值使用，會被定義為全域性變數。
• 如果只宣告變數而不賦值，則預設值為 undefined。
• var表現與javascript一致，會有變數提升。

變數命名規則：

• 首字元必須是：字母（a-zA-Z），下劃線（_）
• 剩餘字元可以是：字母（a-zA-Z），下劃線（_）， 數字（0-9）

3. 註釋
   方法一：單行註釋 //xxx
   方法二：多行註釋/* xxx /
   方法三：結尾註釋/ , 即從 /* 開始往後的所有 WXS 程式碼均被註釋.

4. 運算子
   wxs擁有基本的+、-、*、/等基礎運算子，自增++自減–等一元運算子，比較運算子，等值運算子、賦值運算子，位運算子，二元運算子等等。

5. 語句
   wxs也有基本的執行控制語句：if()else{}、switch (注意case 關鍵詞後面只能使用：變數，數字，字串。)、for、while、do while，用法和java類似。

6. 資料型別
   wxs支援的資料型別有以下幾種：

• number ： 數值（包括整數、小數）
• string ：字串（"xxx"或者’xxx’）
• boolean：布林值
• object：物件（object 是一種無序的鍵值對）
• function：函式（function 裡面可以使用 arguments 關鍵詞，該關鍵詞支援lenght和[index]屬性）
• array : 陣列（數組裡的元素型別可以不同）
• date：日期（生成 date 物件需要使用 getDate函式, 返回一個當前時間的物件。）
• regexp：正則（生成 regexp 物件需要使用 getRegExp函式，getRegExp(pattern[, flags])）
  引數：
  pattern: 正則表示式的內容。
  flags：修飾符。該欄位只能包含以下字元:
  g: global
  i: ignoreCase
  m: multiline。