uni-app快速入手 ——（3）生命週期

應用生命週期

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

函數名	說明
onLaunch	當uni-app 初始化完成時觸發（全局只觸發一次）
onShow	當 uni-app 啓動，或從後臺進入前臺顯示
onHide	當 uni-app 從前臺進入後臺
onError	當 uni-app 報錯時觸發
onUniNViewMessage	對 nvue 頁面發送的數據進行監聽，可參考 nvue 向 vue 通訊

注意

• 應用生命週期僅可在App.vue中監聽，在其它頁面監聽無效。
• onlaunch裏進行頁面跳轉，如遇白屏報錯，請參考https://ask.dcloud.net.cn/article/35942

 

頁面生命週期

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

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 的自定義組件編譯模式開始支持。

onNavigationBarButtonTap 參數說明：

屬性	類型	說明
index	Number	原生標題欄按鈕數組的下標

onBackPress 回調參數對象說明：

屬性	類型	說明
from	String	觸發返回行爲的來源：'backbutton'——左上角導航欄按鈕及安卓返回鍵；'navigateBack'——uni.navigateBack() 方法。

export default {
    data() {
        return {};
    },
    onBackPress(options) {
        console.log('from:' + options.from)
    }
}