上一篇教程談了些和微信小程序開(kāi)發(fā)本身無(wú)關(guān)的技術(shù)問(wèn)題，現(xiàn)在回到主題。

這邊教程主要對(duì)默認(rèn)生成的index 頁(yè)面進(jìn)行講解。在之前的教程中有寫(xiě)道，每一個(gè)頁(yè)面都包含.js(處理邏輯)，.wxml(描述頁(yè)面內(nèi)容)，.wxss(配置頁(yè)面樣式)三個(gè)文件，index 頁(yè)面也是如此。

講解之前先上圖

這里寫(xiě)圖片描述

index頁(yè)面的內(nèi)容不多，只有一個(gè)用戶頭像，用戶姓名，和一個(gè)"Hello World"，首先來(lái)看看index.wxml的內(nèi)容

<!--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>

該頁(yè)面的層級(jí)結(jié)構(gòu)比較簡(jiǎn)單，三個(gè)view標(biāo)簽，一個(gè)image以及兩個(gè)text標(biāo)簽，其中view為容器標(biāo)簽，image用來(lái)顯示用戶頭像，第一個(gè)text用來(lái)顯示用戶昵稱，第二個(gè)text則是"Hello World"

可以看到頁(yè)面描述文件中綁定了幾個(gè)變量，分別是第二個(gè)view標(biāo)簽的 bindtap="bindViewTap"，image標(biāo)簽的src="{{userInfo.avatarUrl}} 以及兩個(gè)text標(biāo)簽的內(nèi)容文本。那么這些變量定義在哪里呢，答案就在index.js中

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

index.js代碼定義了Page對(duì)象，該對(duì)象中定義了index.wxml綁定的變量，其中onLoad方法會(huì)在頁(yè)面加載時(shí)被調(diào)用，該方法會(huì)調(diào)用app對(duì)象的getUserInfo方法來(lái)獲取用戶信息并賦值給userInfo屬性，這樣界面就可以顯示用戶頭像和昵稱了。而"Hello World"的顯示則是由motto屬性直接指定。

Page對(duì)象還定義了bindViewTap方法，該方法通過(guò)調(diào)用wx.navigateTo導(dǎo)航到logs頁(yè)面。關(guān)于頁(yè)面導(dǎo)航的更多內(nèi)容將在后面的教程中講解。在該例子中，當(dāng)用戶點(diǎn)擊用戶頭像和昵稱的視圖區(qū)域時(shí)，程序便會(huì)顯示logs頁(yè)面。

最后簡(jiǎn)單看下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中使用到的樣式選擇器，這部分比簡(jiǎn)單，在這里就不多做解釋了。