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

注意

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

示例代碼

<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 支持如下頁面生命周期函數：

函數名	說明	平台差異說明	最低版本
onLoad	監聽頁面加載，其參數為上個頁面傳遞的數據，參數類型為Object（用於頁面傳參），參考示例
onShow	監聽頁面顯示。頁面每次出現在屏幕上都觸發，包括從下級頁面點返回露出當前頁面
onReady	監聽頁面初次渲染完成。注意如果渲染速度快，會在頁面進入動畫完成前觸發
onHide	監聽頁面隱藏
onUnload	監聽頁面卸載
onResize	監聽窗口尺寸變化	App、微信小程序
onPullDownRefresh	監聽用戶下拉動作，一般用於下拉刷新，參考示例
onReachBottom	頁面滾動到底部的事件（不是scroll-view滾到底），常用於下拉下一頁數據。具體見下方注意事項
onTabItemTap	點擊 tab 時觸發，參數為Object，具體見下方注意事項	微信小程序、支付寶小程序、百度小程序、H5、App（自定義組件模式）
onShareAppMessage	用戶點擊右上角分享	微信小程序、百度小程序、字節跳動小程序、支付寶小程序
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+

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

onPageScroll : function(e) { //nvue暫不支持滾動監聽，可用bindingx代替 console.log("滾動距離為：" + e.scrollTop); },

onTabItemTap 返回的json對象說明：

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

注意

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

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

onNavigationBarButtonTap 參數說明：

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

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

onBackPress 回調參數對象說明：

屬性	類型	說明
from	String	觸發返回行為的來源：'backbutton'——左上角導航欄按鈕及安卓返回鍵；'navigateBack'——uni.navigateBack() 方法。支付寶小程序端不支持返回此字段

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

注意

• nvue 頁面weex編譯模式支持的生命周期同weex，具體參考：weex生命周期介紹。
• 支付寶小程序真機可以監聽到非navigateBack引發的返回事件（使用小程序開發工具時不會觸發onBackPress），不可以阻止默認返回行為

組件生命周期

uni-app 組件支持的生命周期，與vue標准組件的生命周期相同。這里沒有頁面級的onLoad等生命周期：

函數名	說明	平台差異說明	最低版本
beforeCreate	在實例初始化之后被調用。詳見
created	在實例創建完成后被立即調用。詳見
beforeMount	在掛載開始之前被調用。詳見
mounted	掛載到實例上去之后調用。詳見 注意：此處並不能確定子組件被全部掛載，如果需要子組件完全掛載之后在執行操作可以使用$nextTickVue官方文檔
beforeUpdate	數據更新時調用，發生在虛擬 DOM 打補丁之前。詳見	僅H5平台支持
updated	由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鈎子。詳見	僅H5平台支持
beforeDestroy	實例銷毀之前調用。在這一步，實例仍然完全可用。詳見
destroyed	Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。詳見