二、WXML 模板

從事過網頁程式設計的人知道，網頁程式設計採用的是 HTML + CSS + JS 這樣的組合，其中 HTML 是用來描述當前這個頁面的結構，CSS 用來描述頁面的樣子，JS 通常是用來處理這個頁面和使用者的互動。

同樣道理，在小程式中也有同樣的角色，其中 WXML 充當的就是類似 HTML 的角色。開啟 pages/index/index.wxml，你會看到以下的內容:

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 獲取頭像暱稱 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
 

和 HTML 非常相似，有標籤、屬性等等構成。但是也有很多不一樣的地方，我們來一一闡述一下：

1. 標籤名字有點不一樣 往往寫 HTML 的時候，經常會用到的標籤是 div, p, span，開發者在寫一個頁面的時候可以根據這些基礎的標籤組合出不一樣的元件，例如日曆、彈窗等等。換個思路，既然大家都需要這些元件，為什麼我們不能把這些常用的元件包裝起來，大大提高我們的開發效率。 從上邊的例子可以看到，小程式的 WXML 用的標籤是 view, button, text 等等，這些標籤就是小程式給開發者包裝好的基本能力，我們還提供了地圖、視訊、音訊等等元件能力 更多詳細的元件講述參考下個章節 小程式的能力

2. 多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表示式 在網頁的一般開發流程中，我們通常會通過 JS 操作 DOM (對應 HTML 的描述產生的樹)，以引起介面的一些變化響應使用者的行為。例如，使用者點選某個按鈕的時候，JS 會記錄一些狀態到 JS 變數裡邊，同時通過 DOM API 操控 DOM 的屬性或者行為，進而引起介面一些變化。當專案越來越大的時候，你的程式碼會充斥著非常多的介面互動邏輯和程式的各種狀態變數，顯然這不是一個很好的開發模式，因此就有了 MVVM 的開發模式(例如 React, Vue)，提倡把渲染和邏輯分離。簡單來說就是不要再讓 JS 直接操控 DOM，JS只需要管理狀態即可，然後再通過一種模板語法來描述狀態和介面結構的關係即可。 小程式的框架也是用到了這個思路，如果你需要把一個 Hello World 的字串顯示在介面上。 WXML 是這麼寫 :

   <text></text>
   

   JS 只需要管理狀態即可:

   this.setData({ msg: "Hello World" })
   

   通過 {{ }} 的語法把一個變數繫結到介面上，我們稱為資料繫結。僅僅通過資料繫結還不夠完整的描述狀態和介面的關係，還需要 if/else, for等控制能力，在小程式裡邊，這些控制能力都用 wx: 開頭的屬性來表達。 

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

用以下一些簡單的例子來看看 WXML 具有什麼能力：

資料繫結

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

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

列表渲染

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

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

條件渲染

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

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

模板

<!--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'}
  }
})

事件

<view bindtap="add"> {{count}} </view>

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