uni-app 生命週期

生命週期

應用生命週期

uni-app 支援如下應用生命週期函式：

函式名	說明
onLaunch	當 uni-app初始化完成時觸發（區域性只觸發一次）
onOpen	當 uni-app啟動，或從後臺進入前臺顯示
onHide	當 uni-app從前臺進入後臺
onError	當 uni-app報錯時觸發
onUniNViewMessage	對 nvue頁面傳送的資料進行監聽，可參考 nvue 向 vue 通訊
onUnhandledRejection	對未處理的 Promise 拒絕事件監聽函式（2.8.1+）
onPageNotFound	頁面不存在監聽函式
onThemeChange	監聽系統主題變化

注意

• 應用生命週期僅可在 App.vue 中監聽，在其他頁面監聽無效。
• onlaunch 裡進行頁面調整，如遇白屏報錯，可參考：onlaunch生命週期內navigateto跳轉頁面注意事項

示例程式碼

<script>
    // 只能在App.vue裡監聽應用的生命週期
    export default {
        onLaunch: function() {
            console.log('App Launch')
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

頁面生命週期

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

函式名	說明	平臺差異說明	最低版本
onInit	監聽頁面初始化，其引數通onLoad引數，為上個頁面傳遞的資料，引數型別為Object（用於頁面傳參），觸發時機早於onLoad	百度小程式	3.1.0+
負載	監聽頁面載入，其引數為上個頁面傳遞的資料，引數型別為 Object（用於頁面傳參），參考示例
展出	監聽頁面顯示。頁面每次出現在螢幕上都觸發，包括從下級頁面點返回進入當前頁面
onReady	監聽頁面初次渲染完成。注意如果渲染速度快，會在頁面進入動畫完成前觸發
隱藏	監聽頁面隱藏
onUnload	監聽頁面解除安裝
onResize	監聽視窗尺寸變化	App，微信小程式
onPullDownRefresh	監聽使用者拖動動作，一般用於拖動重新整理，參考示例
onReachBottom	頁面上拉觸底事件的處理函式
onTabItemTap	單擊選項卡時觸發，引數為物件，具體見以下注意事項	微信小程式，百度小程式，H5，App（自定義元件模式）
onShareAppMessage	使用者點選右上角分享	微信小程式，百度小程式，位元組跳動小程式，支付寶小程式
onPageScroll	監聽頁面滾動，引數為物件	nvue 暫不支援
onNavigationBarButtonTap	監聽原生標題欄按鈕點選事件，引數為物件	5+ App，H5
onBackPress	監聽頁面返回，返回事件= {from：backbutton，navigationBack}，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	數	頁面在垂直方向已滾動的距離（單位 px）

注意

• onPageScroll 裡不要寫互動複雜的 js，比如頻繁修改頁面。因為這個生命週期是在渲染層觸發的，在非 h5 端，js是在邏輯層執行的，兩層之間通訊是有損耗的。如果在滾動過程中，頻發觸發兩層之間的資料交換，可能會造成卡頓。
• 如果想實現滾動時標題欄透明漸變，在 App 和 H5 下，可在 pages.json 中配置 titleNView 下的 type 為 transparent。
• 如果需要滾動吸頂固定某些元素，推薦使用 css 的粘性佈局，參考外掛市場。外掛市場也有其他 js 實現的吸頂外掛，但效能不佳，需要時可自行搜尋。
• 在 App、微信小程式、H5 中，也可以使用 wxs 監聽滾動；在 app-nvue 中，可以使用 bindingx 監聽滾動。
• onBackPress 上不可使用 async，會導致無法阻止預設返回

onTabItemTap 引數說明：

屬性	型別	說明
指數	串	被點選 tabItem 的序號，從 0 開始
pagePath	串	被點選 tabItem 的頁面路徑
文字	串	被點選 tabItem 的按鈕文字

注意

• onTabItemTap 常用於單擊當前 tabitem，滾動或重新整理當前頁面。如果是單擊不同的 tabitem，一定會觸發頁面切換。
• 如果想在 App 端實現點選某個 Tabitem，則不能使用 onTabItemTap，可以使用 plus.nativeObj.view 放一個區塊蓋住原先的 TAbitem，並攔截點選事件。
• 支付寶小程式平臺 onTabltemTap 表現為點選非當前 tabitem 後觸發，因此不能用於實現點選返回頂部這種操作。

onTabItemTap : function(e) {
    console.log(e);
    // e的返回格式為json物件： {"index":0,"text":"首頁","pagePath":"pages/index/index"}
},

onNavigationBarButtonTap 引數說明：

屬性	型別	說明
指數	數	原生標題欄按鈕方塊的下標

onNavigationBarButtonTap : function (e) {
    console.log(e);
    // e的返回格式為json物件：{"text":"測試","index":0}
}

onBackPress 某些引數物件說明：

屬性	型別	說明
從	串	觸發返回行為的來源：'backbutton'-左上角導航欄按鈕和安卓返回鍵；'navigateBack'-uni.navigateBack（）方法。支付寶小程式端不支援返回此欄位

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

注意

• nvue 頁面支援的生命週期參考：nvue 生命週期介紹。
• 支付寶小程式真機可以監聽到非 navigateBack 引發的返回事件（使用小程式開發工具時不會觸發 onBackPress），不可以阻止預設返回行為

元件生命週期

uni-app 元件支援的生命週期，與 vue 標準元件的生命週期相同。這裡沒有頁面級的 onLoad 等生命週期：

函式名	說明	平臺差異說明	最低版本
beforeCreate	在例項初始化之後被呼叫。
created	在例項建立完成後被立即呼叫。
beforeMount	在掛載開始之前被呼叫。
mounted	掛載到例項上去之後呼叫。注意：此處並不能確定子元件被全部掛載，如果需要子元件完全掛載之後在執行操作可以使用 $nextTick
beforeUpdate	資料更新時呼叫，發生在虛擬 DOM 打補丁之前。	僅 H5 平臺支援
updated	由於資料更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會呼叫該鉤子。	僅 H5 平臺支援
beforeDestroy	例項銷燬之前呼叫。在這一步，例項仍然完全可用。
destroyed	Vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。