應(yīng)用生命周期

uni-app?支持如下應(yīng)用生命周期函數(shù)：

函數(shù)名說(shuō)明

onLaunch	當(dāng)uni-app?初始化完成時(shí)觸發(fā)(全局只觸發(fā)一次)
onShow	當(dāng)?uni-app?啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示
onHide	當(dāng)?uni-app?從前臺(tái)進(jìn)入后臺(tái)
onError	當(dāng)?uni-app?報(bào)錯(cuò)時(shí)觸發(fā)
onUniNViewMessage	對(duì)?nvue?頁(yè)面發(fā)送的數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)，可參考?nvue 向 vue 通訊
onUnhandledRejection	對(duì)未處理的 Promise 拒絕事件監(jiān)聽(tīng)函數(shù)(2.8.1+)
onPageNotFound	頁(yè)面不存在監(jiān)聽(tīng)函數(shù)
onThemeChange	監(jiān)聽(tīng)系統(tǒng)主題變化

?

這幾個(gè)函數(shù)主要還是在App.vue這個(gè)文件進(jìn)行定義，

注意

• 應(yīng)用生命周期僅可在App.vue中監(jiān)聽(tīng)，在其它頁(yè)面監(jiān)聽(tīng)無(wú)效。
• onlaunch里進(jìn)行頁(yè)面跳轉(zhuǎn)，如遇白屏報(bào)錯(cuò)，請(qǐng)參考https://ask.dcloud.net.cn/article/35942
• onPageNotFound 頁(yè)面實(shí)際上已經(jīng)打開(kāi)了(比如通過(guò)分享卡片、小程序碼)且發(fā)現(xiàn)頁(yè)面不存在，才會(huì)觸發(fā)，api 跳轉(zhuǎn)不存在的頁(yè)面不會(huì)觸發(fā)(如 uni.navigateTo)

---

頁(yè)面生命周期

uni-app?支持如下頁(yè)面生命周期函數(shù)：

函數(shù)名說(shuō)明平臺(tái)差異說(shuō)明最低版本

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

onInit使用注意

• 僅百度小程序基礎(chǔ)庫(kù) 3.260 以上支持 onInit 生命周期
• 其他版本或平臺(tái)可以同時(shí)使用 onLoad 生命周期進(jìn)行兼容，注意避免重復(fù)執(zhí)行相同邏輯
• 不依賴頁(yè)面?zhèn)鲄⒌倪壿嬁梢灾苯邮褂?created 生命周期替代

onReachBottom使用注意 可在pages.json里定義具體頁(yè)面底部的觸發(fā)距離onReachBottomDistance，比如設(shè)為50，那么滾動(dòng)頁(yè)面到距離底部50px時(shí)，就會(huì)觸發(fā)onReachBottom事件。

如使用scroll-view導(dǎo)致頁(yè)面沒(méi)有滾動(dòng)，則觸底事件不會(huì)被觸發(fā)。scroll-view滾動(dòng)到底部的事件請(qǐng)參考scroll-view的文檔

onPageScroll?(監(jiān)聽(tīng)滾動(dòng)、滾動(dòng)監(jiān)聽(tīng)、滾動(dòng)事件)參數(shù)說(shuō)明：

屬性類型說(shuō)明

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

注意

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。