大家如果跟着我第一篇文章 微信小程式開發系列一：微信小程式的申請和開發環境的搭建 一起動手，那麼微信小程式的開發環境一定搭好了。效果就是能把該小程式的體驗版以二維碼的方式發送給其他朋友使用。
我的日常工作是用一個叫做UI5的前端架構做前端開發，剛好這個架構也支援建立xml格式的視圖(UI), 和微信小程式的wxml非常相似。
做過JSP開發的朋友們，可以把wxml類比成JSP檔案。
wxml源代碼：
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 擷取頭像昵稱 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view> 下面逐一解釋每行代碼。
第二行： 聲明了一個視圖元素，css類型為container。這個container類是微信小程式自帶的，如果删除，小程式視圖位置會亂掉，參考我下面的測試：
是以需要保留。
第三行： view元素可以嵌套，相當于原生HTML裡的div元素。此處定義了另一個view元素，css類為userinfo。這個css類不是微信提供的，而是我們自己開發的，位于檔案index.wxss裡：
第四行：
擷取頭像昵稱
定義了一個按鈕，标簽為“擷取頭像昵稱”。
這個按鈕僅當表達式!hasUserInfo && canIUse為true時才顯示。
button是微信小程式架構提供的元件，元件是視圖層的基本組成單元，自帶一些功能與微信風格的樣式。 注意這裡的button标簽并不是HTML原生的标簽。
在微信官網上可以查詢元件的API：
https://developers.weixin.qq.com/miniprogram/dev/component/下面這兩個屬性的含義：
open-type="getUserInfo": 點了這個按鈕之後，會自動取目前點選了該按鈕的微信使用者的明細資料
bindgetuserinfo="jerry_getUserInfo": 當使用者資料成功取回來之後，執行我們自己開發的回調函數jerry_getUserInfo, 該函數定義在小程式index/index.js裡。
第五行到第八行：
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block> 定義了一個block區域，有兩個UI元素組成：image和text。
對image元素，bindtap="bindViewTap", 意思是一旦點選，執行我們在index.js裡實作的事件處理函數bindViewTap。
class="userinfo-avatar": userinfo-avatar也是我們在wxss裡自定義的css類。
src="{{userInfo.avatarUrl}}": 該image的src屬性綁定到資料模型userInfo的字段avatarUrl上。資料類型userInfo是index.js裡建立的，綁定到目前的視圖上。
而另一個文本元素text顯示的文本綁定到userInfo.nickName上。
我們可以直接在手機上打開微信小程式的console頁面，進而檢視目前視圖綁定的資料模型userInfo的明細，其中userInfo.nickName包含的值如下：
第11行：{{motto}}
純文字元素，顯示的文本綁定到資料模型motto上。這個模型字段motto寫死成Hello World，是以我們最後在小程式上看到顯示的“Hello World"。
這篇文章即整個微信小程式開發系列的第二篇到此結束。下一篇文章我會繼續講解index.js裡的代碼含義。
要擷取更多Jerry的原創技術文章，請關注公衆号"汪子熙"或者掃描下面二維碼: