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

GT 發(fā)布于2019-08-20 12:29 / 2249人閱讀

摘要：上一篇教程談了些和微信小程序開發(fā)本身無關(guān)的技術(shù)問題，現(xiàn)在回到主題。這邊教程主要對默認(rèn)生成的頁面進(jìn)行講解。而的顯示則是由屬性直接指定。在該例子中，當(dāng)用戶點(diǎn)擊用戶頭像和昵稱的視圖區(qū)域時，程序便會顯示頁面。

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

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

講解之前先上圖

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



  
    
    {{userInfo.nickName}}
  
  
    {{motto}}

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

可以看到頁面描述文件中綁定了幾個變量，分別是第二個view標(biāo)簽的 bindtap="bindViewTap"，image標(biāo)簽的src="{{userInfo.avatarUrl}} 以及兩個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對象，該對象中定義了index.wxml綁定的變量，其中onLoad方法會在頁面加載時被調(diào)用，該方法會調(diào)用app對象的getUserInfo方法來獲取用戶信息并賦值給userInfo屬性，這樣界面就可以顯示用戶頭像和昵稱了。而"Hello World"的顯示則是由motto屬性直接指定。

Page對象還定義了bindViewTap方法，該方法通過調(diào)用wx.navigateTo導(dǎo)航到logs頁面。關(guān)于頁面導(dǎo)航的更多內(nèi)容將在后面的教程中講解。在該例子中，當(dāng)用戶點(diǎn)擊用戶頭像和昵稱的視圖區(qū)域時，程序便會顯示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中使用到的樣式選擇器，這部分比簡單，在這里就不多做解釋了。