點擊上方【面向對象思考】可快速關注本公衆號！html
文章的內容也好，關注數也好，彷佛又到了爬坡階段。你還在堅持閱讀和轉發麼？程序員
吃過燒烤以後，繼續Helloworld進行說明，今天的內容是wxml文件。數組
WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎組件、事件系統，能夠構建出頁面的結構。它的語法和XML保持一致。微信
主畫面app
主畫面的內容由index.wxml定義。其內容以下：框架
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>xss
咱們稍微細緻一點說明一下index.wxml的內容。讓C/C++程序員也能看懂。函數
註釋
this
<!--index.wxml-->是註釋行，在XML中註釋行的格式是<!-- 註釋內容 -->。spa
最外層容器
接下來第二行<view class="container">到最後一個</view>構成最外層容器。這個容器的class被定義爲"container"，這個"container"是在上一篇文章中講到的app.wxss中定義的。經過這種方式將wxml和wxss聯繫起來。
接下來的層次中有定義了兩個容器，對應的是用戶信息和「HelloWorld」信息。
用戶信息容器
對應用戶信息的容器的class被定義爲「userinfo」，它在index.wxss中被定義。
這裏增長了一個bindtap關鍵字，被指定爲"bindViewTap」。它的含義是當用戶點擊該組件的時候會在該頁面對應的Page中找到相應的事件處理函數bindViewTap。
用戶信息容器中又包含了image對象和text對象。它們一樣使用class關鍵字指定了顯示屬性，咱們就不在一一說明了。咱們要說明的是數據綁定，數據綁定使用 Mustache 語法（雙大括號）將變量包起來，數據綁定的效果就至關於在頁面描述中埋入變量。能夠認爲，程序實際執行時這些變量會被實際的值（或Image）替換。這些值的提供者爲.js文件，咱們下一篇文章說明。具體來講，image對象綁定的是userInfo.avatarUrl，text對象綁定的是userInfo.nickName。
問候語
包含一個簡單的text對象，綁定的是motto。
log表示頁面
<!--logs.wxml-->
<view class="container log-list">
<block wx:for="{{logs}}" wx:for-item="log" wx:key="*this">
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view>
這段代碼中view相關的內容上面已經講過了，這裏只說明block。在這個例子中，block定義容器中的一個表示區域，這個區域使用數組的內容進行填充:
使用
wx:for控制屬性指定被綁定的數組爲logs使用
wx:for-item指定從數組中取出的元素的變量名爲log使用
wx:key指定log和數組元素的關係，本例中的設定值爲"*this"，表示log就是數組元素自己；若是數組元素包含多個屬性，能夠指定屬性名來選擇具體的屬性。
參考文檔
事件
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html
數據綁定
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/data.html
列表渲染
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html
寫在文章的最後
既然已經讀到這裏了，拜託你們再用一分鐘時間，將文章轉發到各位的朋友圈，微信羣中。本公衆號的成長鬚要您的支持！
本日關注數：531 文章的內容也好，關注數都到了爬坡階段，一塊兒努力！
本文分享自微信公衆號 - 面向對象思考（OOThinkingDalian）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。