大家如果跟著我第一篇文章?微信小程序開發系列一：微信小程序的申請和開發環境的搭建?一起動手，那么微信小程序的開發環境一定搭好了。效果就是能把該小程序的體驗版以二維碼的方式發送給其他朋友使用。

這個系列接下來的文章我們就來研究使用微信開發者工具自動生成的這個小程序的實現文件。本文以小程序的視圖設計為主，就是下圖所示pages/index目錄里的index.wxml文件。

我的日常工作是用一個叫做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的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:

總結

以上是生活随笔為你收集整理的微信小程序开发系列二：微信小程序的视图设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。