小程式目錄結構,頁面載入,生命週期初探筆記
目錄結構:
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方法。
相關文章
- 微信小程式頁面的生命週期微信小程式
- JSP筆記-生命週期JS筆記
- react生命週期筆記React筆記
- Spark記錄(二):Spark程式的生命週期Spark
- 程式碼目錄結構記錄
- ASP.NET頁面生命週期與應用程式生命週期ASP.NET
- 微信小程式--生命週期微信小程式
- 微信小程式生命週期微信小程式
- React生命週期學習筆記React筆記
- ArkTS 頁面和自定義元件生命週期元件
- vue 基礎入門筆記 09:生命週期函式Vue筆記函式
- mpvue小程式開發 - 生命週期梳理Vue
- 【微信小程式】頁面生命週期onShow,onLoad,onReady的差別微信小程式
- Vue生命週期函式.個人筆記Vue函式筆記
- docker筆記23-pod的生命週期Docker筆記
- 初探AngularJS6.x---目錄結構說明AngularJS
- Maven 構建生命週期Maven
- 如何繫結頁面生命週期(一)-Glide實現IDE
- vue生命週期總結Vue
- React生命週期總結React
- 【UniApp】-uni-app-OptionAPI應用生命週期和頁面生命週期APPAPI
- 【UniApp】-uni-app-CompositionAPI應用生命週期和頁面生命週期APPAPI
- ES 筆記三十三: 分片及其生命週期筆記
- Vue學習筆記(2)—— Vue的生命週期Vue筆記
- iOS開發筆記(九):UIViewController的生命週期iOS筆記UIViewController
- Laravel8學習筆記01 - 目錄結構Laravel筆記
- linux檔案系統的目錄結構筆記Linux筆記
- 安卓學習筆記---開篇(目錄結構)安卓筆記
- 小程式的生命週期函式(簡單易懂)函式
- 鴻蒙Navigation頁面生命週期鴻蒙Navigation
- C# 11頁面生命週期C#
- AspNet2.0頁面生命週期
- 如何使用 vue + typescript 編寫頁面 (Vue生命週期函式)VueTypeScript函式
- mpvue生命週期初探Vue
- 小程式生命週期分析與註冊流程回撥
- React-生命週期雜記React
- angular4學習記錄 — 元件通訊、生命週期Angular元件
- Linux 學習筆記--目錄結構及檔案基本操作Linux筆記