uniApp 生命周期【應用生命周期 和 頁面生命周期】


應用生命周期

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,會導致無法阻止默認返回


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM