深入淺析uni-app的生命週期

本篇文章為大家帶來了關於uniapp聲明週期的相關知識，其中主要介紹了應用聲明週期、頁面生命週期以及組件生命週期的相關問題，希望對大家有幫助。

推薦：《uniapp教學》

#應用生命週期

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

函數名稱#說明 onLaunch當onShow當 onHide當 onError當 ##onUniNViewMessagenvueonUnhandledRejectiononPageNotFoundonThemeChange

注意

• 應用程式生命週期僅可在App.vue中監聽，在其它頁面監聽無效。
• onlaunch裡進行頁面跳轉，如遇白屏報錯，請參考onlaunch生命週期內navigateto跳轉頁面注意- DCloud問答
• onPageNotFound 頁面實際上已經打開了（例如透過分享卡片、小程式碼）且發現頁面不存在，才會觸發，api 跳轉不存在的頁面不會觸發（如uni.navigateTo）

頁面生命週期

uni-app 支援下列頁面生命週期函數：

	uni-app 初始化完成時觸發（全域只觸發一次）
	uni-app 啟動，或從後台進入前台顯示
	uni-app 從前台進入後台
	uni-app 錯誤錯誤時觸發
對	頁面發送的資料進行監聽，可參考 nvue 向vue 通訊
對未處理的Promise 拒絕事件監聽函數（2.8. 1 ）
頁面不存在監聽函數
# 監聽系統主題變更

##onTabItemTap##點擊tab 時觸發，參數為Object ，具體見下方註意事項使用者點擊右上角分享監聽頁面滾動，參數為Object監聽原生標題列按鈕點擊事件，參數為Object##App、H5監聽頁面返回，返回event = {from:backbutton、 navigateBack} ，backbutton 表示來源是左上角返回按鈕或android 返回鍵；navigateBack表示來源是uni. navigateBack ；詳細說明及使用：onBackPress 詳解。支付寶小程式只有真機能觸發，只能監聽非navigateBack引起的返回，不可阻止預設行為。 app、H5、支付寶小程式監聽原生標題列搜尋輸入框輸入內容變更事件監聽原生標題列搜尋輸入框搜尋事件，用戶點擊軟鍵盤上的「搜尋」按鈕時觸發。 監聽原生標題列搜尋輸入框點選事件（pages.json中的searchInput 設定disabled 為true 時才會觸發）##onShareTimeline監聽使用者點選右上角轉寄到朋友圈微信小程式2.8.1 onAddToFavorites微信小程式

#函數名稱	說明	平台差異說明	最低版本
onInit	監聽頁面初始化，其參數同onLoad 參數，為上個頁面傳遞的數據，參數型別為Object（用於頁面傳參），觸發時機早於onLoad	#百度小程式	3.1.0
onLoad	監聽頁面加載，其參數為上個頁面傳遞的數據，參數類型為Object（用於頁面傳參），參考範例
onShow	監聽頁面顯示。頁面每次出現在螢幕上都會觸發，包括從下級頁麵返回露出目前頁面
onReady	監聽頁面初次渲染完成。注意如果渲染速度快，會在頁面進入動畫完成前觸發
onHide	#監聽頁面隱藏
#onUnload	監聽頁面卸載
onResize	#監聽視窗尺寸變化	App、微信小程式
onPullDownRefresh	監聽使用者下拉動作，一般用於下拉刷新，參考範例
onReachBottom	頁面捲動到底部的事件（不是scroll-view滾到底），常用於下拉下一頁資料。請看下方注意事項
onTabItemTap
微信小程式、QQ小程式、支付寶小程式、百度小程式、H5、App			#onShareAppMessage
微信小程式、QQ小程式、支付寶小程式、位元組小程式、飛書小程式、快手小程式			#onPageScroll
nvue暫不支援			onNavigationBarButtonTap
			onBackPress
			#onNavigationBarSearchInputChanged
#App、H5	1.6.0		onNavigationBarSearchInputConfirmed
App、H5	1.6.0		onNavigationBarSearchInputClicked
App、H5	1.6.0
			##監聽使用者點擊右上角收藏

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，會導致無法阻止預設回傳

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 回呼參數物件說明：

屬性類型說明fromString觸發回傳行為的來源：'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 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见

推荐：《uniapp教程》

以上是深入淺析uni-app的生命週期的詳細內容。更多資訊請關注PHP中文網其他相關文章！