微信小程序開發學習------(分析視圖程序)

根據https://blog.csdn.net/weixin_30363263/article/details/89449966我們搭好了微信小程序環境。

實現了能把該小程序的體驗版以二維碼的方式發送給其他朋友使用。

接下來研究使用微信開發者工具自動生成的這個小程序的實現文件。

本文以小程序的視圖設計爲主，就是下圖所示pages/index目錄裏的index.wxml文件。

 

微信小程序的wxml類似網頁開發，也可把wxml類比成JSP文件。

wxml源代碼：

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo"    bindgetuserinfo="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元素。類似於css進行裝飾的，定義了另一個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上。

 

第11行：<text class="user-motto">{{motto}}</text>

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