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

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

我的日常工作是用一個叫做UI5的前端框架做前端開發(fā)，剛好這個框架也支持創(chuàng)建xml格式的視圖(UI), 和微信小程序的wxml非常相似。

做過JSP開發(fā)的朋友們，可以把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元素可以嵌套，相當(dāng)于原生HTML里的div元素。此處定義了另一個view元素，css類為userinfo。這個css類不是微信提供的，而是我們自己開發(fā)的，位于文件index.wxss里：

第四行：

獲取頭像昵稱

定義了一個按鈕，標(biāo)簽為“獲取頭像昵稱”。

這個按鈕僅當(dāng)表達(dá)式!hasUserInfo && canIUse為true時才顯示。

button是微信小程序框架提供的組件，組件是視圖層的基本組成單元，自帶一些功能與微信風(fēng)格的樣式。 注意這里的button標(biāo)簽并不是HTML原生的標(biāo)簽。

在微信官網(wǎng)上可以查詢組件的API：

https://developers.weixin.qq.com/miniprogram/dev/component/

下面這兩個屬性的含義：

open-type=“getUserInfo”: 點了這個按鈕之后，會自動取當(dāng)前點擊了該按鈕的微信用戶的明細(xì)數(shù)據(jù)

bindgetuserinfo=“jerry_getUserInfo”: 當(dāng)用戶數(shù)據(jù)成功取回來之后，執(zhí)行我們自己開發(fā)的回調(diào)函數(shù)jerry_getUserInfo, 該函數(shù)定義在小程序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區(qū)域，有兩個UI元素組成：image和text。

對image元素，bindtap=“bindViewTap”, 意思是一旦點擊，執(zhí)行我們在index.js里實現(xiàn)的事件處理函數(shù)bindViewTap。

class=“userinfo-avatar”: userinfo-avatar也是我們在wxss里自定義的css類。

src="{{userInfo.avatarUrl}}": 該image的src屬性綁定到數(shù)據(jù)模型userInfo的字段avatarUrl上。數(shù)據(jù)類型userInfo是index.js里創(chuàng)建的，綁定到當(dāng)前的視圖上。

而另一個文本元素text顯示的文本綁定到userInfo.nickName上。

我們可以直接在手機上打開微信小程序的console頁面，從而查看當(dāng)前視圖綁定的數(shù)據(jù)模型userInfo的明細(xì)，其中userInfo.nickName包含的值如下：

第11行：{{motto}}

純文本元素，顯示的文本綁定到數(shù)據(jù)模型motto上。這個模型字段motto硬編碼成Hello World，所以我們最后在小程序上看到顯示的“Hello World"。

這篇文章即整個微信小程序開發(fā)系列的第二篇到此結(jié)束。下一篇文章我會繼續(xù)講解index.js里的代碼含義。

要獲取更多Jerry的原創(chuàng)技術(shù)文章，請關(guān)注公眾號"汪子熙"或者掃描下面二維碼:

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。