微信小程序-page

 

 

 

一 什麼是page（）

page（），是一個函數，用來註冊一個頁面，
接受一個object參數，
指定頁面的初始數據，生命週期函數，事件處理函數
等等

object參數說明：

（1）data （object）

頁面的初始數據
初始化數據
初始化數據將做爲頁面的第一次渲染，
data將會以JSON的形式有邏輯層傳至渲染層 因此其數據必須是能夠 轉成JSON的格式 （字符串，數字，布爾值，對象，數組） 渲染層能夠經過WXML對數據進行綁定 

 

初始化數據示例代碼.png

（2）onLoad（function）

生命週期函數--監聽頁面加載
頁面加載onLoad
一個頁面只會調用一次
接收頁面參數能夠獲取
wx.navigateTo,wx.redirectTo, <navigator/>中的query 

（3）onReady （function）

生命週期函數--監聽頁面初次渲染完成

（4）onShow （function）

生命週期函數--監聽頁面顯示 頁面顯示onShow 每次打開頁面都會調用一次 頁面初次渲染完成onReady 一個頁面只會調用一次，表明頁面已經準備穩當，能夠和視圖層進行交互 對界面的設置如 wx.setNavigationBarTitle請在onReady以後設置 

（5）onHide （function）

生命週期函數--監聽頁面隱藏
頁面隱藏onHide
當navigateTo或者底部tab切換時候調用

（6）onUnload（function）

生命週期函數--監聽頁面卸載
頁面卸載onUnload
當redirectTo或者navigateBack的時候調用

（7）onPullDownRefresh （function）

頁面相關事件處理函數--監聽用戶下拉動做
頁面相關事件的處理函數
onPullDownRefresh：下拉刷新
監聽用戶下拉刷新事件
須要在config的window選項中開啓enablePullDownRefresh 當處理完數據刷新後， wx.stopPullDownRefresh能夠中止當前頁面的下拉刷新 

（8）onReachBottom (function)

頁面上拉觸底事件的處理函數

（9）其餘 （Any）

開發者能夠添加任意的函數或者數據到object參數中，
在頁面的函數中用this能夠訪問 

 

page示例代碼.png

二 事件處理函數

除了初始化數據和生命週期函數，
page中還能夠定義一些特殊的函數，
事件處理函數，
在渲染層能夠在組件中加入事件綁定，
當達到觸發事件後，
就會執行page中定義的事件處理函數

 

事件處理函數示例代碼.png

（1）Page.prototype.setData()

setData
函數用於將數據從邏輯層發送到視圖層，
同時改變對應的 this.data的值 注意： 直接修改 this.data 無效， 沒法改變頁面的狀態， 還會形成數據不一致。 單次設置的數據不能超過1024kB， 請儘可能避免一次設置過多的數據 

setData（）參數格式
接受一個對象，
以key，value的形式表示將this.data中的key對應的值改成value key能夠很是靈活，以數據路徑的形式給出 

 

setData()函數示例代碼（1）.png

 

setData（）函數示例代碼（2）.png

（2）getCurrentPages()

getCurrentPages() 函數用於獲取當前頁面棧的實例，
以數組形式按棧的順序給出，第一個元素爲首頁，最後一個參數是當前頁
注意：不要嘗試修改頁面棧，會致使路由以及頁面狀態錯誤

三 頁面棧

框架以棧的形式維護了當前的全部頁面，當發生路由切換的時候，頁面棧的表現以下：
初始化 新頁面入棧
打開新頁面   新頁面入棧
頁面重定向   當前頁面出棧，新頁面入棧
頁面返回    頁面不斷出棧，直到目標返回頁，新頁面入棧
Tab 切換  當前頁面出棧，新頁面入棧

四 生命週期

 

生命週期圖（1）.png

 

生命週期圖（2）.png

五 頁面的路由

在小程序中，全部頁面的路由所有由框架進行管理，對於路由的觸發方式以及頁面生命週期函數以下：

路由方式——觸發時機——路由後頁面——路由當前頁
（1）
初始化——
小程序打開的第一個頁面——onLoad，onShow
（2）
打開新頁面——
調用API（wx.navigateTo)或者使用組件<navigator/>——onLoad，onShow—— onHide （3） 頁面重定向—— 調用 API （wx.redirectTo）或使用組件 <navigator />——onLoad，onShow—— onUnload （4） 頁面返回—— 調用API(wx.navigateBack)或者用戶按左上角返回按鈕——onShow—— onUnload（多層頁面返回每一個頁面都會按順序觸發onUnload） （5) Tab 切換—— 多 Tab 模式下用戶切換 Tab—— 第一次打開 onLoad，onshow；不然 onShow—— onHide