小程序模板網(wǎng)

瘋狂早茶微信小程序基礎(chǔ)篇《三》:index 頁面解析,logs頁面解析 ... ...

發(fā)布時(shí)間:2018-03-28 14:54 所屬欄目:小程序開發(fā)教程
第一部分:index 頁面解析

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

講解之前先上圖


index頁面的內(nèi)容不多,只有一個(gè)用戶頭像,用戶姓名,和一個(gè)"Hello World",首先來看看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>

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

可以看到頁面描述文件中綁定了幾個(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ì)在頁面加載時(shí)被調(diào)用,該方法會(huì)調(diào)用app對(duì)象的getUserInfo方法來獲取用戶信息并賦值給userInfo屬性,這樣界面就可以顯示用戶頭像和昵稱了。而"Hello World"的顯示則是由motto屬性直接指定。

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

最后簡(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)單,在這里就不多做解釋了。


第二部分:logs頁面解析

老規(guī)矩先上圖

該頁面包含返回按鈕(用于返回index頁面),頁面title和程序啟動(dòng)日志列表。
和index頁面相比,logs頁面多了一個(gè)logs.json文件,來配置頁面title的內(nèi)容


	
{
    "navigationBarTitleText": "查看啟動(dòng)日志"
}
 

更多配置項(xiàng)可以參考配置 小程序


	
<!--logs.wxml-->
<view class="container log-list">
  <block wx:for="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>
 

在logs.wxml中,定義了三個(gè)標(biāo)簽,分別為view,block和text,其中view標(biāo)簽為容器,block用于綁定logs數(shù)組,而text標(biāo)簽用于顯示每一條log。wx:for和wx:for-item是小程序框提供的列表綁定語法,更多詳情請(qǐng)參考列表渲染


	
//logs.js
var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

logs.js定義了logs數(shù)組,并在onLoad方法中從本地緩存中獲取程序啟動(dòng)時(shí)間數(shù)據(jù),之后調(diào)用數(shù)組的map方法來將時(shí)間格式化為字符串


	
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}

最后仍然是logs.wxss,對(duì)頁面樣式進(jìn)行控制。

到此為止,默認(rèn)生成程序的解析部分就結(jié)束了。這個(gè)解析過程是為了對(duì)微信小程序有個(gè)總體上的理解,所以很多地方并沒有深入。在后面的教程中,我會(huì)繼續(xù)講解微信小程序開發(fā)的各個(gè)方面。

 


本文地址:http://22321a.com/wxmini/doc/course/22909.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢