1. 程式人生 > 實用技巧 >uni-app-生命週期

uni-app-生命週期

官方文件

生命週期

應用生命週期

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 監聽系統主題變化

注意

頁面生命週期

uni-app支援如下頁面生命週期函式:

函式名說明平臺差異說明最低版本
onLoad 監聽頁面載入,其引數為上個頁面傳遞的資料,引數型別為Object(用於頁面傳參),參考示例
onShow 監聽頁面顯示。頁面每次出現在螢幕上都觸發,包括從下級頁面點返回露出當前頁面
onReady 監聽頁面初次渲染完成。注意如果渲染速度快,會在頁面進入動畫完成前觸發
onHide 監聽頁面隱藏
onUnload 監聽頁面解除安裝
onResize 監聽視窗尺寸變化 App、微信小程式
onPullDownRefresh 監聽使用者下拉動作,一般用於下拉重新整理,參考示例
onReachBottom 頁面上拉觸底事件的處理函式
onTabItemTap 點選 tab 時觸發,引數為Object,具體見下方注意事項 微信小程式、百度小程式、H5、App(自定義元件模式)
onShareAppMessage 使用者點選右上角分享 微信小程式、百度小程式、位元組跳動小程式、支付寶小程式
onPageScroll 監聽頁面滾動,引數為Object
onNavigationBarButtonTap 監聽原生標題欄按鈕點選事件,引數為Object 5+ App、H5
onBackPress 監聽頁面返回,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示來源是左上角返回按鈕或 android 返回鍵;navigateBack表示來源是 uni.navigateBack ;詳細說明及使用:onBackPress 詳解 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+

onPageScroll引數說明:

屬性型別說明
scrollTop Number 頁面在垂直方向已滾動的距離(單位px)

onTabItemTap引數說明:

屬性型別說明
index String 被點選tabItem的序號,從0開始
pagePath String 被點選tabItem的頁面路徑
text String 被點選tabItem的按鈕文字

注意

  • onTabItemTap常用於點選當前tabitem,滾動或重新整理當前頁面。如果是點選不同的tabitem,一定會觸發頁面切換。
  • 如果想在App端實現點選某個tabitem不跳轉頁面,不能使用onTabItemTap,可以使用plus.nativeObj.view放一個區塊蓋住原先的tabitem,並攔截點選事件。
  • onTabItemTap在App端,從HBuilderX 1.9 的自定義元件編譯模式開始支援。
  • 避免在 onShow 裡使用需要許可權的 API(比如 setScreenBrightness() 等需要手機許可權), 可能會再次觸發onShow造成死迴圈。

onNavigationBarButtonTap引數說明:

屬性型別說明
index Number 原生標題欄按鈕陣列的下標

onBackPress回撥引數物件說明:

屬性型別說明
from String 觸發返回行為的來源:'backbutton'——左上角導航欄按鈕及安卓返回鍵;'navigateBack'——uni.navigateBack() 方法。
export default {
    data() {
        return {};
    },
    onBackPress(options) {
        console.log('from:' + options.from)
    }
}

注意