生命周期

應(yīng)用生命周期

uni-app 支持如下應(yīng)用生命周期函數(shù)：

創(chuàng)新互聯(lián)成都企業(yè)網(wǎng)站建設(shè)服務(wù)，提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作網(wǎng)站開發(fā),網(wǎng)站定制,建網(wǎng)站,網(wǎng)站搭建,網(wǎng)站設(shè)計(jì),自適應(yīng)網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì)師打造企業(yè)風(fēng)格網(wǎng)站,提供周到的售前咨詢和貼心的售后服務(wù)。歡迎咨詢做網(wǎng)站需要多少錢:18982081108

函數(shù)名	說明
onLaunch	當(dāng)uni-app初始化完成時(shí)觸發(fā)（局部只觸發(fā)一次）
onOpen	當(dāng)uni-app啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示
onHide	當(dāng)uni-app從前臺(tái)進(jìn)入后臺(tái)
onError	當(dāng)uni-app報(bào)錯(cuò)時(shí)觸發(fā)
onUniNViewMessage	對(duì)nvue頁面發(fā)送的數(shù)據(jù)進(jìn)行監(jiān)聽，可參考 nvue 向 vue 通訊
onUnhandledRejection	對(duì)未處理的 Promise 拒絕事件監(jiān)聽函數(shù)（2.8.1+）
onPageNotFound	頁面不存在監(jiān)聽函數(shù)
onThemeChange	監(jiān)聽系統(tǒng)主題變化

注意

• 應(yīng)用生命周期僅可在 App.vue 中監(jiān)聽，在其他頁面監(jiān)聽無效。
• onlaunch 里進(jìn)行頁面調(diào)整，如遇白屏報(bào)錯(cuò)，請(qǐng)參考 https://ask.dcloud.net.cn/article/35942

示例代碼

頁面生命周期

uni-app 支持如下頁面生命周期函數(shù)：

函數(shù)名	說明	平臺(tái)差異說明	最低版本
onInit	監(jiān)聽頁面初始化，其參數(shù)通onLoad參數(shù)，為上個(gè)頁面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類型為Object（用于頁面?zhèn)鲄ⅲ?，觸發(fā)時(shí)機(jī)早于onLoad	百度小程序	3.1.0+
負(fù)載	監(jiān)聽頁面加載，其參數(shù)為上個(gè)頁面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類型為 Object（用于頁面?zhèn)鲄ⅲ?，參考示?/td>
展出	監(jiān)聽頁面顯示。頁面每次出現(xiàn)在屏幕上都觸發(fā)，包括從下級(jí)頁面點(diǎn)返回進(jìn)入當(dāng)前頁面
onReady	監(jiān)聽頁面初次渲染完成。注意如果渲染速度快，會(huì)在頁面進(jìn)入動(dòng)畫完成前觸發(fā)
隱藏	監(jiān)聽頁面隱藏
onUnload	監(jiān)聽頁面卸載
onResize	監(jiān)聽窗口尺寸變化	App，微信小程序
onPullDownRefresh	監(jiān)聽用戶拖動(dòng)動(dòng)作，一般用于拖動(dòng)刷新，參考示例
onReachBottom	頁面上拉觸底事件的處理函數(shù)
onTabItemTap	單擊選項(xiàng)卡時(shí)觸發(fā)，參數(shù)為對(duì)象，具體見以下注意事項(xiàng)	微信小程序，百度小程序，H5，App（自定義組件模式）
onShareAppMessage	用戶點(diǎn)擊右上角分享	微信小程序，百度小程序，字節(jié)跳動(dòng)小程序，支付寶小程序
onPageScroll	監(jiān)聽頁面滾動(dòng)，參數(shù)為對(duì)象	nvue 暫不支持
onNavigationBarButtonTap	監(jiān)聽原生標(biāo)題欄按鈕點(diǎn)擊事件，參數(shù)為對(duì)象	5+ App，H5
onBackPress	監(jiān)聽頁面返回，返回事件= {from：backbutton，navigationBack}，backbutton 表示來源是左上角返回按鈕或android 返回鍵； navigateBack 表示來源是 uni.navigateBack；詳細(xì)說明及使用：onBackPress 詳解。支付寶小程序只有真機(jī)能觸發(fā)，只能監(jiān)聽非 navigateBack 引起的返回，不可阻止默認(rèn)行為。	App，H5、支付寶小程序
onNavigationBarSearchInputChanged	監(jiān)聽原生標(biāo)題欄搜索輸入框輸入內(nèi)容變化事件	App，H5	1.6.0
onNavigationBarSearchInputConfirmed	監(jiān)聽原生標(biāo)題欄搜索輸入框搜索事件，用戶點(diǎn)擊軟鍵盤上的“搜索”按鈕時(shí)觸發(fā)。	App，H5	1.6.0
onNavigationBarSearchInputClicked	監(jiān)聽原生標(biāo)題欄搜索輸入框點(diǎn)擊事件	App，H5	1.6.0
onShareTimeline	監(jiān)聽用戶點(diǎn)擊右上角轉(zhuǎn)發(fā)到朋友去	微信小程序	2.8.1+
onAddToFavorites	監(jiān)聽用戶點(diǎn)擊右上角收藏	微信小程序	2.8.1+

onInit使用注意

• 僅百度小程序基礎(chǔ)庫 3.260 以上支持 onInit 生命周期
• 其他版本或平臺(tái)可以同時(shí)使用 onLoad 生命周期進(jìn)行兼容，注意避免重復(fù)執(zhí)行相同邏輯
• 不依賴頁面?zhèn)鲄⒌倪壿嬁梢灾苯邮褂?created 生命周期替代

onReachBottom 使用注意 可在 pages.json 里定義具體頁面底部的觸發(fā)距離 onReachBottomDistance，比如設(shè)為 50，那么滾動(dòng)頁面到距離底部 50px 時(shí)，就會(huì)觸發(fā) onReachBottom 事件。

如使用 scroll-view 導(dǎo)致頁面沒有滾動(dòng)，則觸底事件不會(huì)被觸發(fā)。scroll-view 滾動(dòng)到底部的事件請(qǐng)參考 scroll-view 的文檔

onPageScroll 參數(shù)說明：

屬性	類型	說明
scrollTop	數(shù)	頁面在垂直方向已滾動(dòng)的距離（單位 px）

注意

• onPageScroll 里不要寫交互復(fù)雜的 js，比如頻繁修改頁面。因?yàn)檫@個(gè)生命周期是在渲染層觸發(fā)的，在非 h5 端，js是在邏輯層執(zhí)行的，兩層之間通信是有損耗的。如果在滾動(dòng)過程中，頻發(fā)觸發(fā)兩層之間的數(shù)據(jù)交換，可能會(huì)造成卡頓。
• 如果想實(shí)現(xiàn)滾動(dòng)時(shí)標(biāo)題欄透明漸變，在 App 和 H5 下，可在 pages.json 中配置 titleNView 下的 type 為 transparent，參考。
• 如果需要滾動(dòng)吸頂固定某些元素，推薦使用 css 的粘性布局，參考插件市場(chǎng)。插件市場(chǎng)也有其他 js 實(shí)現(xiàn)的吸頂插件，但性能不佳，需要時(shí)可自行搜索。
• 在 App、微信小程序、H5 中，也可以使用 wxs 監(jiān)聽滾動(dòng)，參考；在 app-nvue 中，可以使用 bindingx 監(jiān)聽滾動(dòng)，參考。
• onBackPress 上不可使用 async，會(huì)導(dǎo)致無法阻止默認(rèn)返回

onTabItemTap 參數(shù)說明：

屬性	類型	說明
指數(shù)	串	被點(diǎn)擊 tabItem 的序號(hào)，從 0 開始
pagePath	串	被點(diǎn)擊 tabItem 的頁面路徑
文本	串	被點(diǎn)擊 tabItem 的按鈕文字

注意

• onTabItemTap 常用于單擊當(dāng)前 tabitem，滾動(dòng)或刷新當(dāng)前頁面。如果是單擊不同的 tabitem，一定會(huì)觸發(fā)頁面切換。
• 如果想在 App 端實(shí)現(xiàn)點(diǎn)擊某個(gè) Tabitem，則不能使用 onTabItemTap，可以使用 plus.nativeObj.view 放一個(gè)區(qū)塊蓋住原先的 TAbitem，并攔截點(diǎn)擊事件。
• 支付寶小程序平臺(tái) onTabltemTap 表現(xiàn)為點(diǎn)擊非當(dāng)前 tabitem 后觸發(fā)，因此不能用于實(shí)現(xiàn)點(diǎn)擊返回頂部這種操作。

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

onNavigationBarButtonTap 參數(shù)說明：

屬性	類型	說明
指數(shù)	數(shù)	原生標(biāo)題欄按鈕方塊的下標(biāo)

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

onBackPress 某些參數(shù)對(duì)象說明：

屬性	類型	說明
從	串	觸發(fā)返回行為的來源：'backbutton'-左上角導(dǎo)航欄按鈕和安卓返回鍵；'navigateBack'-uni.navigateBack（）方法。支付寶小程序端不支持返回此字段

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

注意

• nvue 頁面支持的生命周期參考：nvue 生命周期介紹。
• 支付寶小程序真機(jī)可以監(jiān)聽到非 navigateBack 引發(fā)的返回事件（使用小程序開發(fā)工具時(shí)不會(huì)觸發(fā) onBackPress），不可以阻止默認(rèn)返回行為

組件生命周期

uni-app 組件支持的生命周期，與 vue 標(biāo)準(zhǔn)組件的生命周期相同。這里沒有頁面級(jí)的 onLoad 等生命周期：

函數(shù)名	說明	平臺(tái)差異說明	最低版本
beforeCreate	在實(shí)例初始化之后被調(diào)用。詳見
created	在實(shí)例創(chuàng)建完成后被立即調(diào)用。詳見
beforeMount	在掛載開始之前被調(diào)用。詳見
mounted	掛載到實(shí)例上去之后調(diào)用。詳見 注意：此處并不能確定子組件被全部掛載，如果需要子組件完全掛載之后在執(zhí)行操作可以使用$nextTickVue官方文檔
beforeUpdate	數(shù)據(jù)更新時(shí)調(diào)用，發(fā)生在虛擬 DOM 打補(bǔ)丁之前。詳見	僅 H5 平臺(tái)支持
updated	由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁，在這之后會(huì)調(diào)用該鉤子。詳見	僅 H5 平臺(tái)支持
beforeDestroy	實(shí)例銷毀之前調(diào)用。在這一步，實(shí)例仍然完全可用。詳見
destroyed	Vue 實(shí)例銷毀后調(diào)用。調(diào)用后，Vue 實(shí)例指示的所有東西都會(huì)解綁定，所有的事件監(jiān)聽器會(huì)被移除，所有的子實(shí)例也會(huì)被銷毀。詳見

網(wǎng)頁題目：創(chuàng)新互聯(lián)UNI-APP教程：uni-app生命周期
文章鏈接：http://uogjgqi.cn/article/cdgeece.html