> 參考文檔：https://uniapp.dcloud.io/frame?id=%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F [TOC] ### 應用生命周期 `uni-app`支持如下應用生命周期函數： | 函數名 | 說明 | | --- | --- | | onLaunch | 當`uni-app`初始化完成時觸發（全局只觸發一次） | | onShow | 當`uni-app`啟動，或從后臺進入前臺顯示 | | onHide | 當`uni-app`從前臺進入后臺 | | onError | 當`uni-app`報錯時觸發 | | onUniNViewMessage | 對`nvue`頁面發送的數據進行監聽，可參考[nvue 向 vue 通訊](https://uniapp.dcloud.io/use-weex?id=nvue-%e5%90%91-vue-%e9%80%9a%e8%ae%af) | | onUnhandledRejection | 對未處理的 Promise 拒絕事件監聽函數（2.8.1+） | | onPageNotFound | 頁面不存在監聽函數 | | onThemeChange | 監聽系統主題變化 | **注意** * 應用生命周期僅可在`App.vue`中監聽，在其它頁面監聽無效。 * onlaunch里進行頁面跳轉，如遇白屏報錯，請參考[https://ask.dcloud.net.cn/article/35942](https://ask.dcloud.net.cn/article/35942) ### [頁面生命周期](https://uniapp.dcloud.io/frame?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f) `uni-app`支持如下頁面生命周期函數： | 函數名 | 說明 | 平臺差異說明 | | --- | --- | --- | | onLoad | 監聽頁面加載| | | onShow | 監聽頁面顯示 | | | onReady | 監聽頁面初次渲染完成 | | | onHide | 監聽頁面隱藏 | | | onUnload | 監聽頁面卸載 | | | onResize | 監聽窗口尺寸變化 | App、微信小程序 | | onPullDownRefresh | 監聽用戶下拉動作，一般用于下拉刷新 | | | onReachBottom | 頁面上拉觸底事件的處理函數 | | | onTabItemTap | 點擊 tab 時觸發 | 微信小程序、百度小程序、H5、App（自定義組件模式） | | onShareAppMessage | 用戶點擊右上角分享 | 微信小程序、百度小程序、字節跳動小程序、支付寶小程序 | | onPageScroll | 監聽頁面滾動 | | | onNavigationBarButtonTap | 監聽原生標題欄按鈕點擊事件 | 5+ App、H5 | | onBackPress | 監聽頁面返回| App、H5 | | onNavigationBarSearchInputChanged | 監聽原生標題欄搜索輸入框輸入內容變化事件 | App、H5 | | onNavigationBarSearchInputConfirmed | 監聽原生標題欄搜索輸入框搜索事件，用戶點擊軟鍵盤上的“搜索”按鈕時觸發。 | App、H5 | | onNavigationBarSearchInputClicked | 監聽原生標題欄搜索輸入框點擊事件 | App、H5 | | onShareTimeline | 監聽用戶點擊右上角轉發到朋友圈 | 微信小程序 | | onAddToFavorites | 監聽用戶點擊右上角收藏 | 微信小程序 | `onPageScroll`參數說明： | 屬性 | 類型 | 說明 | | --- | --- | --- | | scrollTop | Number | 頁面在垂直方向已滾動的距離（單位px） | `onTabItemTap`參數說明： | 屬性 | 類型 | 說明 | | --- | --- | --- | | index | String | 被點擊tabItem的序號，從0開始 | | pagePath | String | 被點擊tabItem的頁面路徑 | | text | String | 被點擊tabItem的按鈕文字 | **注意** * onTabItemTap常用于點擊當前tabitem，滾動或刷新當前頁面。如果是點擊不同的tabitem，一定會觸發頁面切換。 * 如果想在App端實現點擊某個tabitem不跳轉頁面，不能使用onTabItemTap，可以使用[plus.nativeObj.view](http://www.html5plus.org/doc/zh_cn/nativeobj.html)放一個區塊蓋住原先的tabitem，并攔截點擊事件。 * onTabItemTap在App端，從HBuilderX 1.9 的自定義組件編譯模式開始支持。 * 避免在 onShow 里使用需要權限的 API（比如 setScreenBrightness() 等需要手機權限）, 可能會再次觸發onShow造成死循環。 `onNavigationBarButtonTap`參數說明： | 屬性 | 類型 | 說明 | | --- | --- | --- | | index | Number | 原生標題欄按鈕數組的下標 | `onBackPress`回調參數對象說明： | 屬性 | 類型 | 說明 | | --- | --- | --- | | from | String | 觸發返回行為的來源：'backbutton'——左上角導航欄按鈕及安卓返回鍵；'navigateBack'——uni.navigateBack() 方法。 | ~~~ export default { data() { return {}; }, onBackPress(options) { console.log('from:' + options.from) } } ~~~ **注意** * nvue 頁面支持的生命周期參考：[nvue 生命周期介紹](https://uniapp.dcloud.io/use-weex?id=%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f)。 ### 代碼案例 ``` <template> <view class="content"> <image class="logo" src="../../static/image/myHover.png" @click="tap"></image> <view> <text class="title">{{title}}</text> </view> </view> </template> <script> export default { data() { return { title: 'Hello' } }, onLoad() { console.log('頁面加載') }, onShow() { console.log('頁面顯示') }, onReady(){ console.log('頁面初次顯示') }, onHide() { console.log('頁面隱藏') }, onUnload() { console.log('頁面卸載') }, onBackPress(){ console.log('頁面返回...') }, onShareAppMessage() { console.log('分享!') }, onReachBottom() { console.log('下拉加載...') }, onPageScroll(){ console.log('頁面滾動...') }, onPullDownRefresh() { console.log('上拉刷新...') uni.stopPullDownRefresh(); }, // #ifdef APP-PLUS onNavigationBarButtonTap(){ }, // #endif methods: { tap(){ console.log('tap點擊!'); } } } </script> ```