微信小程序：WXML 模板

一、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 非常相似，WXML 由標簽、屬性等等構成。但是也有很多不一樣的地方，我們來一一闡述一下：

（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>{{msg}}</text>

JS 只需要管理狀態即可:

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

通過 {{ }} 的語法把一個變量綁定到界面上，我們稱為數據綁定。

僅僅通過數據綁定還不夠完整的描述狀態和界面的關系，還需要 if/else, for等控制能力，在小程序里邊，這些控制能力都用 wx: 開頭的屬性來表達。

二、WXML用法

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

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

（1）數據綁定

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

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

（2）列表渲染

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

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

（3）條件渲染

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

（4）模版

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

（5）事件

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

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