微信小程式開發系列二：微信小程式的檢視設計

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

這個系列接下來的文章我們就來研究使用微信開發者工具自動生成的這個小程式的實現檔案。本文以小程式的檢視設計為主，就是下圖所示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>

下面逐一解釋每行程式碼。

第二行：<view class="container"> 宣告瞭一個檢視元素，css型別為container。這個container類是微信小程式自帶的，如果刪除，小程式檢視位置會亂掉，參考我下面的測試：

所以需要保留。

第三行： <view class="userinfo"> view元素可以巢狀，相當於原生HTML裡的div元素。此處定義了另一個view元素，css類為userinfo。這個css類不是微信提供的，而是我們自己開發的，位於檔案index.wxss裡：

第四行：

<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="jerry_getUserInfo"> 獲取頭像暱稱 </button>

定義了一個按鈕，標籤為“獲取頭像暱稱”。

這個按鈕僅當表示式!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行：<text class="user-motto">{{motto}}</text>

純文字元素，顯示的文字繫結到資料模型motto上。這個模型欄位motto硬編碼成Hello World，所以我們最後在小程式上看到顯示的“Hello World"。

這篇文章即整個微信小程式開發系列的第二篇到此結束。下一篇文章我會繼續講解index.js裡的程式碼含義。