微信小程序開發系列二:微信小程序的視圖設計

你們若是跟着我第一篇文章 微信小程序開發系列一:微信小程序的申請和開發環境的搭建 一塊兒動手,那麼微信小程序的開發環境必定搭好了。效果就是能把該小程序的體驗版以二維碼的方式發送給其餘朋友使用。css

這個系列接下來的文章咱們就來研究使用微信開發者工具自動生成的這個小程序的實現文件。本文以小程序的視圖設計爲主,就是下圖所示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裏:xss

第四行:函數

<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裏的代碼含義。

要獲取更多Jerry的原創技術文章,請關注公衆號"汪子熙"或者掃描下面二維碼:

相關文章
相關標籤/搜索