微信小程序開發教程(基礎篇)5-index 頁面解析

上一篇教程談了些和微信小程序開發自己無關的技術問題，如今回到主題。

這邊教程主要對默認生成的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標籤的內容文本。那麼這些變量定義在哪裏呢，答案就在index.js中

//index.js
//獲取應用實例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件處理函數
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //調用應用實例的方法獲取全局數據
    app.getUserInfo(function(userInfo){
      //更新數據
      that.setData({
        userInfo:userInfo
      })
    })
  }
})

index.js代碼定義了Page對象，該對象中定義了index.wxml綁定的變量，其中onLoad方法會在頁面加載時被調用，該方法會調用app對象的getUserInfo方法來獲取用戶信息並賦值給userInfo屬性，這樣界面就能夠顯示用戶頭像和暱稱了。而"Hello World"的顯示則是由motto屬性直接指定。

Page對象還定義了bindViewTap方法，該方法經過調用wx.navigateTo導航到logs頁面。關於頁面導航的更多內容將在後面的教程中講解。在該例子中，當用戶點擊用戶頭像和暱稱的視圖區域時，程序便會顯示logs頁面。

最後簡單看下index.wxss

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

該文件定義了index.wxml中使用到的樣式選擇器，這部分比簡單，在這裏就很少作解釋了。