小程式目錄結構,頁面載入,生命週期初探筆記

weixin_33924312發表於2019-02-20

目錄結構:
project
├── pages
| ├── index
| | ├── index.json index 頁面配置
| | ├── index.js index 頁面邏輯
| | ├── index.wxml index 頁面結構
| | └── index.wxss index 頁面樣式表
| └── log
| ├── log.json log 頁面配置
| ├── log.wxml log 頁面邏輯
| ├── log.js log 頁面結構
| └── log.wxss log 頁面樣式表
├── app.js 小程式邏輯
├── app.json 小程式公共設定
└── app.wxss 小程式公共樣式表

onLoad:只在頁面載入時呼叫一次,接收頁面引數可以獲取到vx.navagationTo 和vx.redirectTo事件及<navagation/>中的query事件。

onShow:在頁面顯示時呼叫,每次開啟頁面都會呼叫一次。

onReady:引數在頁面初次渲染時呼叫,沒有個頁面只會呼叫一次。代表頁面已經準備好,可以和檢視層進行資料互動,對戒面的設定如wx.setNavigationBarTitle 函式等可以在onReady之後設定

onHide:引數在頁面解除安裝時呼叫,即當頁面進行navigateTo頁面導航或者使用者通過操作底部導航按鈕切換其他頁面時被呼叫。

onUnload 引數在頁面解除安裝時呼叫。即當頁面執行redirectTo 或navigateBack操作時呼叫。

可以從三個方面理解小程式的生命週期。
1.應用生命週期
2.頁面生命週期
3.應用生命週期影響頁面生命週期
//應用生命週期


1828389-f37c26383e671e8b.jpeg
應用生命週期.jpeg

1.使用者首次開啟小程式,觸發 onLaunch(全域性只觸發一次)。

2.小程式初始化完成後,觸發onShow方法,監聽小程式顯示。

3.小程式從前臺進入後臺,觸發 onHide方法。

4.小程式從後臺進入前臺顯示,觸發 onShow方法。

5.小程式後臺執行一定時間,或系統資源佔用過高,會被銷燬。

前臺、後臺定義: 當使用者點選左上角關閉,或者按了裝置 Home 鍵離開微信,小程式並沒有直接銷燬,而是進入了後臺;當再次進入微信或再次開啟小程式,又會從後臺進入前臺。

//頁面生命週期


1828389-22efb0776a891e25.jpeg
頁面生命週期.jpeg

1.小程式註冊完成後,載入頁面,觸發onLoad方法。

2.頁面載入後觸發onShow方法,顯示頁面。

3.首次顯示頁面,會觸發onReady方法,渲染頁面元素和樣式,一個頁面只會呼叫一次。

4.當小程式後臺執行或跳轉到其他頁面時,觸發onHide方法。

5.當小程式有後臺進入到前臺執行或重新進入頁面時,觸發onShow方法。

6.當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack(),觸發onUnload

//應用生命週期影響頁面生命週期
1828389-05834c6d7dfd0504.jpeg
應用生命週期影響頁面生命週期.jpeg

1.小程式初始化完成後,頁面首次載入觸發onLoad,只會觸發一次。

2.當小程式進入到後臺,先執行頁面onHide方法再執行應用onHide方法。

3.當小程式從後臺進入到前臺,先執行應用onShow方法再執行頁面onShow方法。

相關文章