小程式開發基礎篇之index頁面解析（5）

上一篇教學談了些和微信小程式開發本身無關的技術問題，現在回到主題。

這邊教學主要對預設產生的index 頁面進行講解。在先前的教學中有寫道，每一個頁面都包含.js(處理邏輯)，.wxml(描述頁面內容)，.wxss(配置頁面樣式)三個文件，index 頁面也是如此。

講解之前先上圖

#這裡寫圖片描述

index頁面的內容不多，只有一個使用者頭像，使用者姓名，和一個"Hello World"，首先來看看index.wxml的內容

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

該頁面的層級結構比較簡單，三個view標籤，一個image以及兩個text標籤，其中view為容器標籤，image用來顯示使用者頭像，第一個text用來顯示使用者暱稱，第二個text則是"Hello World"

可以看到頁面描述檔中綁定了幾個變量，分別是第二個view標籤的bindtap="bindViewTap"，image標籤的src="{{userInfo.avatarUrl}} 以及兩個text標籤的內容文字。 onLoad方法會在頁面載入時被調用，該方法會調用app物件的getUserInfo方法來取得使用者資訊並賦值給userInfo屬性，這樣介面就可以顯示使用者頭像和暱稱了。 motto屬性直接指定。 ，當使用者點選使用者頭像和暱稱的視圖區域時，程式便會顯示logs頁面。的樣式選擇器，這部分比簡單，在這裡就不多做解釋了。

以上是小程式開發基礎篇之index頁面解析（5）的詳細內容。更多資訊請關注PHP中文網其他相關文章！