應用生命周期

uni-app?支持如下應用生命周期函數：

函數名說明

onLaunch	當uni-app?初始化完成時觸發(全局只觸發一次)
onShow	當?uni-app?啟動，或從后臺進入前臺顯示
onHide	當?uni-app?從前臺進入后臺
onError	當?uni-app?報錯時觸發
onUniNViewMessage	對?nvue?頁面發送的數據進行監聽，可參考?nvue 向 vue 通訊
onUnhandledRejection	對未處理的 Promise 拒絕事件監聽函數(2.8.1+)
onPageNotFound	頁面不存在監聽函數
onThemeChange	監聽系統主題變化

?

這幾個函數主要還是在App.vue這個文件進行定義，

注意

• 應用生命周期僅可在App.vue中監聽，在其它頁面監聽無效。
• onlaunch里進行頁面跳轉，如遇白屏報錯，請參考https://ask.dcloud.net.cn/article/35942
• onPageNotFound 頁面實際上已經打開了(比如通過分享卡片、小程序碼)且發現頁面不存在，才會觸發，api 跳轉不存在的頁面不會觸發(如 uni.navigateTo)

---

頁面生命周期

uni-app?支持如下頁面生命周期函數：

函數名說明平臺差異說明最低版本

onInit	監聽頁面初始化，其參數同 onLoad 參數，為上個頁面傳遞的數據，參數類型為 Object(用于頁面傳參)，觸發時機早于 onLoad	百度小程序	3.1.0+
onLoad	監聽頁面加載，其參數為上個頁面傳遞的數據，參數類型為 Object(用于頁面傳參)，參考示例	?	?
onShow	監聽頁面顯示。頁面每次出現在屏幕上都觸發，包括從下級頁面點返回露出當前頁面	?	?
onReady	監聽頁面初次渲染完成。注意如果渲染速度快，會在頁面進入動畫完成前觸發	?	?
onHide	監聽頁面隱藏	?	?
onUnload	監聽頁面卸載	?	?
onResize	監聽窗口尺寸變化	App、微信小程序	?
onPullDownRefresh	監聽用戶下拉動作，一般用于下拉刷新，參考示例	?	?
onReachBottom	頁面滾動到底部的事件(不是scroll-view滾到底)，常用于下拉下一頁數據。具體見下方注意事項	?	?
onTabItemTap	點擊 tab 時觸發，參數為Object，具體見下方注意事項	微信小程序、QQ小程序、支付寶小程序、百度小程序、H5、App(自定義組件模式)	?
onShareAppMessage	用戶點擊右上角分享	微信小程序、QQ小程序、支付寶小程序、字節小程序、快手小程序	?
onPageScroll	監聽頁面滾動，參數為Object	nvue暫不支持	?
onNavigationBarButtonTap	監聽原生標題欄按鈕點擊事件，參數為Object	App、H5	?
onBackPress	監聽頁面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示來源是左上角返回按鈕或 android 返回鍵；navigateBack表示來源是 uni.navigateBack ；詳細說明及使用：onBackPress 詳解。支付寶小程序只有真機能觸發，只能監聽非navigateBack引起的返回，不可阻止默認行為。	app、H5、支付寶小程序	?
onNavigationBarSearchInputChanged	監聽原生標題欄搜索輸入框輸入內容變化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	監聽原生標題欄搜索輸入框搜索事件，用戶點擊軟鍵盤上的“搜索”按鈕時觸發。	App、H5	1.6.0
onNavigationBarSearchInputClicked	監聽原生標題欄搜索輸入框點擊事件	App、H5	1.6.0
onShareTimeline	監聽用戶點擊右上角轉發到朋友圈	微信小程序	2.8.1+
onAddToFavorites	監聽用戶點擊右上角收藏	微信小程序	2.8.1+

onInit使用注意

• 僅百度小程序基礎庫 3.260 以上支持 onInit 生命周期
• 其他版本或平臺可以同時使用 onLoad 生命周期進行兼容，注意避免重復執行相同邏輯
• 不依賴頁面傳參的邏輯可以直接使用 created 生命周期替代

onReachBottom使用注意 可在pages.json里定義具體頁面底部的觸發距離onReachBottomDistance，比如設為50，那么滾動頁面到距離底部50px時，就會觸發onReachBottom事件。

如使用scroll-view導致頁面沒有滾動，則觸底事件不會被觸發。scroll-view滾動到底部的事件請參考scroll-view的文檔

onPageScroll?(監聽滾動、滾動監聽、滾動事件)參數說明：

屬性類型說明

scrollTop	Number	頁面在垂直方向已滾動的距離(單位px)

注意

• onPageScroll里不要寫交互復雜的js，比如頻繁修改頁面。因為這個生命周期是在渲染層觸發的，在非h5端，js是在邏輯層執行的，兩層之間通信是有損耗的。如果在滾動過程中，頻發觸發兩層之間的數據交換，可能會造成卡頓。
• 如果想實現滾動時標題欄透明漸變，在App和H5下，可在pages.json中配置titleNView下的type為transparent，參考。
• 如果需要滾動吸頂固定某些元素，推薦使用css的粘性布局，參考插件市場。插件市場也有其他js實現的吸頂插件，但性能不佳，需要時可自行搜索。
• 在App、微信小程序、H5中，也可以使用wxs監聽滾動，參考；在app-nvue中，可以使用bindingx監聽滾動，參考。
• onBackPress上不可使用async，會導致無法阻止默認返回

總結

以上是生活随笔為你收集整理的uniApp 生命周期【应用生命周期 和 页面生命周期】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。