首頁 > web前端 > uni-app > 深入淺析uni-app的生命週期

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

WBOY
發布: 2022-02-24 17:56:45
轉載
4172 人瀏覽過

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

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

推薦:《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中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板