uniApp 生命週期【應用生命週期 和 頁面生命週期】
阿新 • • 發佈：2021-09-14
應用生命週期
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，會導致無法阻止預設返回
本文來自部落格園，作者：鹹瑜，轉載請註明原文連結：https://www.cnblogs.com/bi-hu/p/15267794.html