小程式目錄結構,頁面載入,生命週期初探筆記
目錄結構:
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.應用生命週期影響頁面生命週期
//應用生命週期
1.使用者首次開啟小程式,觸發 onLaunch(全域性只觸發一次)。
2.小程式初始化完成後,觸發onShow方法,監聽小程式顯示。
3.小程式從前臺進入後臺,觸發 onHide方法。
4.小程式從後臺進入前臺顯示,觸發 onShow方法。
5.小程式後臺執行一定時間,或系統資源佔用過高,會被銷燬。
前臺、後臺定義: 當使用者點選左上角關閉,或者按了裝置 Home 鍵離開微信,小程式並沒有直接銷燬,而是進入了後臺;當再次進入微信或再次開啟小程式,又會從後臺進入前臺。
//頁面生命週期
1.小程式註冊完成後,載入頁面,觸發onLoad方法。
2.頁面載入後觸發onShow方法,顯示頁面。
3.首次顯示頁面,會觸發onReady方法,渲染頁面元素和樣式,一個頁面只會呼叫一次。
4.當小程式後臺執行或跳轉到其他頁面時,觸發onHide方法。
5.當小程式有後臺進入到前臺執行或重新進入頁面時,觸發onShow方法。
6.當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack(),觸發onUnload
//應用生命週期影響頁面生命週期1.小程式初始化完成後,頁面首次載入觸發onLoad,只會觸發一次。
2.當小程式進入到後臺,先執行頁面onHide方法再執行應用onHide方法。
3.當小程式從後臺進入到前臺,先執行應用onShow方法再執行頁面onShow方法。
相關文章
- 微信小程式頁面的生命週期微信小程式
- asp.net 頁面 生命週期ASP.NET
- react生命週期筆記React筆記
- Fragment生命週期筆記Fragment筆記
- 信管筆記-- 生命週期筆記
- 微信小程式生命週期微信小程式
- 微信小程式--生命週期微信小程式
- Spark記錄(二):Spark程式的生命週期Spark
- JSP筆記-生命週期JS筆記
- React筆記(元件生命週期)React筆記元件
- minjun信管筆記-- 生命週期筆記
- 記憶體頁生命週期下降記憶體
- ASP.NET頁面生命週期與應用程式生命週期ASP.NET
- 程式碼目錄結構記錄
- React生命週期學習筆記React筆記
- React元件生命週期——精華筆記React元件筆記
- ArkTS 頁面和自定義元件生命週期元件
- Servlet第一篇【介紹Servlet、HTTP協議、WEB目錄結構、編寫入門Servlet程式、Servlet生命週期】ServletHTTP協議Web
- vue 基礎入門筆記 09:生命週期函式Vue筆記函式
- Service的啟動、繫結,以及生命週期的筆記筆記
- Vue生命週期函式.個人筆記Vue函式筆記
- mpvue小程式開發 - 生命週期梳理Vue
- docker筆記23-pod的生命週期Docker筆記
- Activity生命週期與啟動模式筆記模式筆記
- 【微信小程式】頁面生命週期onShow,onLoad,onReady的差別微信小程式
- vue生命週期總結Vue
- React生命週期總結React
- Activity生命週期總結
- fragment生命週期(總結)Fragment
- ES 筆記三十三: 分片及其生命週期筆記
- Vue學習筆記(2)—— Vue的生命週期Vue筆記
- ReactNative學習筆記五之生命週期React筆記
- 如何使用 vue + typescript 編寫頁面 (Vue生命週期函式)VueTypeScript函式
- 安卓學習筆記---開篇(目錄結構)安卓筆記
- 小程式的生命週期函式(簡單易懂)函式
- 專案生命週期(轉載)
- C# 11頁面生命週期C#
- 【UniApp】-uni-app-OptionAPI應用生命週期和頁面生命週期APPAPI