前言

• 好，經過上個章節的介紹完畢之后，了解了一下 uni-app-修改組件主題和樣式
• 那么了解完了uni-app-修改組件主題和樣式之后，這篇文章來給大家介紹一下 uni-app-OptionAPI應用生命周期和頁面生命周期
• 首先不管三七二十一，先來新建一個項目

搭建演示環境

創建一個全新的項目：

然后在配置一下，微信小程序的 AppId，直接去之前的項目中拷貝一下即可，找到之前項目的 manifest.json 文件，然后選擇微信小程序配置，復制一下即可。

• 經過如上的這么一頓操作之后，就可以搭建完畢運行環境，與編碼環境
• 接下來就可以開始進行介紹 uni-app-OptionAPI應用生命周期和頁面生命周期內容了

步入正題

應用生命周期

• 在看這個應用生命周期之前，你們肯定或許有這么一個疑問就是在哪監聽應用的生命周期呢？其實很簡單，就是在 App.vue 文件中
• 打開 App.vue 文件，可以看到分別有 onLaunch、onShow、onHide 這幾個生命周期函數，分別對應的是應用的生命周期函數

那么我是怎么知道的呢？其實很簡單，我們可以去官網查看一下，uni-app-應用生命周期

官方文檔中介紹了很多，比較常用的就是 onLaunch、onShow、onHide 這幾個生命周期函數, 所以我們就來看一下這幾個生命周期函數的作用就可以了，其他的自己去試一下就可以了。

• onLaunch：當uni-app初始化完成時觸發（全局只觸發一次）
• onShow：當uni-app啟動，或從后臺進入前臺顯示
• onHide：當uni-app從前臺進入后臺

演示方式非常簡單，我們直接將項目以微信小程序的方式運行起來，然后在微信小程序中進行操作，當我運行起來之后，微信小程序控制臺中就打印出來了我們在生命周期函數中打印的內容，如下圖所示：

那么 onHide 的內容咋沒有打印出來呢？其實很簡單，因為 onHide 是當 uni-app 從前臺進入后臺的時候才會觸發，所以我們需要將微信小程序切換到后臺，之所以用微信小程序運行的原因就是有這么一個功能，可以將微信小程序切換到后臺，如下圖所示：

當我點擊之后，就可以看到 onHide 的內容也打印出來了，如下圖所示：

頁面生命周期

在看頁面生命周期之前，我們先配置一下 tabBar：

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首頁"
    }, {
        "pagePath": "pages/account/account",
        "text": "賬號"
    }]
}

然后在 pages 目錄下新建一個賬號頁面：

index.vue 頁面中的代碼如下所示：

<template>
	<view>
		首頁
	</view>
</template>

<script>
	export default {
	}
</script>

<style>
</style>

account.vue 頁面中的代碼如下所示：

<template>
	<view>
		賬號
	</view>
</template>

<script>
	export default {
	}
</script>

<style>

</style>

搭建完畢之后，我們就可以來看一下頁面生命周期了，頁面生命周期的介紹可以去官網查看一下，uni-app-頁面生命周期

官方文檔中介紹了很多，說什么支持 Vue 的組件生命周期還擴展了一些額外的生命周期函數，我給大家介紹一部分，其他的自己去試一下就可以了。

1. onLoad：監聽頁面加載
2. onShow：監聽頁面顯示
3. onReady：監聽頁面初次渲染完成
4. onHide：監聽頁面隱藏
5. onPullDownRefresh：監聽用戶下拉動作
6. onReachBottom：頁面上拉觸底事件的處理函數

那么我們就來看一下這幾個生命周期函數的作用就可以了，其他的自己去試一下就可以了。

更改 index.vue 頁面中的代碼如下所示：

<script>
	export default {
		onLoad() {
			console.log("首頁 onLoad");
		},
		onShow() {
			console.log("首頁 onShow");
		},
		onReady() {
			console.log("首頁 onReady");
		},
		onHide() {
			console.log("首頁 onHide");
		},
		onPullDownRefresh() {
			console.log("首頁 onPullDownRefresh");
		},
		onReachBottom() {
			console.log("首頁 onReachBottom");
		},
	}
</script>

更改 account.vue 頁面中的代碼如下所示：

<script>
    export default {
        onLoad() {
            console.log("賬號 onLoad");
        },
        onShow() {
            console.log("賬號 onShow");
        },
        onReady() {
            console.log("賬號 onReady");
        },
        onHide() {
            console.log("賬號 onHide");
        },
        onPullDownRefresh() {
            console.log("賬號 onPullDownRefresh");
        },
        onReachBottom() {
            console.log("賬號 onReachBottom");
        },
    }
</script>

然后我們就可以運行起來，然后在微信小程序控制臺中就可以看到我們在生命周期函數中打印的內容，我這里錄制一個視頻，大家可以看一下：

通過觀察發現是不是還有我們的上拉刷新和下拉加載的生命周期函數沒有打印出來呢？其實很簡單，我來改造一下首頁的代碼，如下所示：

<template>
    <view>
        <text>首頁</text>
        <view class="content">
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 1</view>
            <view class="item">item 88</view>
            <view class="item">item 99</view>
        </view>
    </view>
</template>

<style>
    .item {
        width: 100%;
        height: 200rpx;
    }
</style>

改造之后還不夠，如果要想實現下拉加載和上拉刷新，還需要更改 pages.json 文件，我這里是以首頁頁面為例，需要在首頁對象的 style 中配置 enablePullDownRefresh 和 onReachBottomDistance 屬性。

• enablePullDownRefresh：是否開啟下拉刷新
• onReachBottomDistance：頁面上拉觸底事件觸發時距頁面底部距離，單位為px（設置上拉加載更多的距離）

onReachBottomDistance 有默認值，所以我們不需要配置，直接配置 enablePullDownRefresh 屬性即可，如下所示：

{
    "path": "pages/index/index",
    "style": {
        "enablePullDownRefresh": true
    }
}

然后我們就可以運行起來，然后在微信小程序控制臺中就可以看到我們在 onPullDownRefresh 和 onReachBottom 生命周期函數中打印的內容，我這里錄制一個視頻，大家可以看一下：

總結

好，經過上面的介紹完畢之后，我們就可以來總結一下 uni-app-OptionAPI應用生命周期和頁面生命周期的內容了。

• 應用生命周期：onLaunch、onShow、onHide
• 頁面生命周期：onLoad、onShow、onReady、onHide、onPullDownRefresh、onReachBottom

其他的生命周期函數，大家可以去官網查看一下，自己去試一下就可以了。

最后

大家好我是 BNTang, 一個熱愛分享的技術的開發者，如果大家覺得我的文章對你有幫助的話，可以關注我的公眾號 JavaBoyL，我會在公眾號中分享一些IT技術和一些個人的見解，謝謝大家的支持。

總結

以上是生活随笔為你收集整理的【UniApp】-uni-app-OptionAPI应用生命周期和页面生命周期的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。