【整理】小程序頁面Page構造頁面-初始數據、生命週期回調、事件處理函數

開始學習小程序開發，常用的基礎內容進行記錄。

使用 Page 構造器註冊頁面

簡單的頁面可以使用 Page() 進行構造。

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 頁面創建時執行
    //頁面加載時觸發。一個頁面只會調用一次，可以在 onLoad 的參數中獲取打開當前頁面路徑中的參數。
  },
  onShow: function() {
    // 頁面出現在前臺時執行 
    //頁面顯示/切入前臺時觸發。
  },
  onReady: function() {
    // 頁面首次渲染完畢時執行
    //頁面初次渲染完成時觸發。一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。

    //注意：對界面內容進行設置的 API 如wx.setNavigationBarTitle，請在onReady之後進行。詳見生命週期 
  },
  onHide: function() {
    // 頁面從前臺變爲後臺時執行
    //頁面隱藏/切入後臺時觸發。 如 wx.navigateTo 或底部 tab 切換到其他頁面，小程序切入後臺等
  },
  onUnload: function() {
    // 頁面銷燬時執行
    //頁面卸載時觸發。如wx.redirectTo或wx.navigateBack到其他頁面時
  },
  onPullDownRefresh: function() {
    // 觸發下拉刷新時執行
    //監聽用戶下拉刷新事件。
    //要在app.json的window選項中或頁面配置中開啓enablePullDownRefresh。
    //可以通過wx.startPullDownRefresh觸發下拉刷新，調用後觸發下拉刷新動畫，效果與用戶手動下拉刷新一致。
    //當處理完數據刷新後，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。
  },
  onReachBottom: function() {
    // 頁面觸底時執行
    //監聽用戶上拉觸底事件。
    //可以在app.json的window選項中或頁面配置中設置觸發距離onReachBottomDistance。
    //在觸發距離內滑動期間，本事件只會被觸發一次
  },
  onShareAppMessage: function () {
    // 頁面被用戶分享時執行
  },
  onPageScroll: function() {
    // 頁面滾動時執行
  },
  onResize: function() {
    // 頁面尺寸變化時執行
  },
  onTabItemTap(item) {
    // tab 點擊時執行
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // 事件響應函數
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // 自由數據
  customData: {
    hi: 'MINA'
  }
})

Page(Object object)

註冊小程序中的一個頁面。接受一個 Object 類型參數，其指定頁面的初始數據、生命週期回調、事件處理函數等。

參數

Object object

屬性	類型	默認值	必填	說明
data	Object			頁面的初始數據
onLoad	function			生命週期回調—監聽頁面加載
onShow	function			生命週期回調—監聽頁面顯示
onReady	function			生命週期回調—監聽頁面初次渲染完成
onHide	function			生命週期回調—監聽頁面隱藏
onUnload	function			生命週期回調—監聽頁面卸載
onPullDownRefresh	function			監聽用戶下拉動作
onReachBottom	function			頁面上拉觸底事件的處理函數
onShareAppMessage	function			用戶點擊右上角轉發
onAddToFavorites	function			用戶點擊右上角收藏
onPageScroll	function			頁面滾動觸發事件的處理函數
onResize	function			頁面尺寸改變時觸發，詳見 響應顯示區域變化
onTabItemTap	function			當前是 tab 頁時，點擊 tab 時觸發
其他	any			開發者可以添加任意的函數或數據到 Object 參數中，在頁面的函數中用 this 可以訪問

 

 

PageObject[] getCurrentPages()

獲取當前頁面棧。數組中第一個元素爲首頁，最後一個元素爲當前頁面。

注意：

• 不要嘗試修改頁面棧，會導致路由以及頁面狀態錯誤。
• 不要在 App.onLaunch 的時候調用 getCurrentPages()，此時 page 還沒有生成。

頁面page實例的生命週期：