uni-app 生命周期、語法

1. 前言

本小節我們一起來了解 uni-app 生命周期以及生命周期函數的語法。包括生命周期的幾個階段、觸發機制和執行順序。同學們不僅要理解生命周期的概念，還要知道生命周期從創建到銷毀是怎樣的一個過程。

2. 什么是生命周期

生命周期就是指一個對象生老病死的過程，針對 uni-app 來說，生命周期就是 uni-app 實例從創建、運行到銷毀的過程。

2.1 生命周期分類

uni-app 生命周期包括應用生命周期和頁面生命周期。

應用生命周期：是控制應用全局的生命周期，監聽應用初始化、啟動、報錯等狀態。只在 App.vue 文件中有效，App.vue 文件是應用配置文件，用來配置 App 全局樣式以及監聽應用生命周期。

頁面生命周期：是控制單個頁面的生命周期，監聽頁面渲染、加載、顯示、下拉、滾動、分享等狀態。

2.2 生命周期函數

在生命周期中的每個階段都會伴隨著一個函數的觸發，從而執行生命周期函數中的具體邏輯代碼，這些函數就被稱為生命周期函數。

下面我們來看一下 uni-app 中都包括哪些生命周期函數。

3. 生命周期函數匯總

3.1 應用生命周期

前臺、后臺定義：

當我們離開應用時，應用不會被直接銷毀，而是進入了后臺。當我們再次進入到應用時，應用就會從后臺進入前臺。

那應用什么時候會被真正銷毀呢？

當應用進入后臺超過一定時間，或者系統資源占用過高，應用才會被真正的銷毀。再次打開就需要重新初始化啟動應用。

3.2 頁面生命周期

3.2.1 onLoad 參數說明

頁面生命周期函數 onLoad，是頁面最先執行的生命周期函數，如果從上個頁面跳轉到本頁面，可以通過參數 option 傳遞上個頁面的數據。

我們來看一下實例，比如要從首頁（index.vue）跳轉到個人中心頁面（me.vue）。
實例：

//index.vue
//跳轉語句，并在跳轉鏈接上面加上要傳遞的數據
uni.reLaunch({
    url: 'test?name=我是首頁的數據'
});

//me.vue
export default {
    //options參數就是上個頁面傳遞過來的數據
    onLoad: function (options) {
        console.log(options.name);
    }
}

//打印出來的結果
我是首頁的數據

3.2.2 onPullDownRefresh 函數

用于監聽該頁面用戶下拉頁面的動作。

普通頁面下拉不會觸發 onPullDownRefresh 函數，要先在 pages.json 里面，找到當前頁面的 pages 節點，并在 style 選項中將 enablePullDownRefresh 設置為 true，下拉頁面才可以觸發 onPullDownRefresh 函數。

下面來看一下實例，比如我們想開啟首頁（index.vue）的下拉動作。
實例：

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

調用完成 onPullDownRefresh 函數后，用 stopPullDownRefresh 函數可以停止當前頁面的下拉狀態。
實例：

export default{
    onPullDownRefresh(){
        console.log('用戶下拉頁面時觸發')
        uni.stopPullDownRefresh()
    }
}

3.2.3 onTabItemTap 參數說明

實例：

export default {
    onTabItemTap(options) {
        console.log('被點擊tabItem的序號index:' + options.index)
        console.log('被點擊tabItem的頁面路徑pagePath:' + options.pagePath)
        console.log('被點擊tabItem的按鈕文字text:' + options.text)
    }
}

注意以下幾點：

• onTabItemTap 常用于點擊當前 tabitem，滾動或刷新當前頁面。如果是點擊不同的 tabitem，一定會觸發頁面切換。
• 如果想在 App 端實現點擊某個 tabitem 不跳轉頁面，不能使用 onTabItemTap，可以使用 plus.nativeObj.view 放一個區塊蓋住原先的 tabitem，并攔截點擊事件。
• 在 App 端，從 HBuilderX 1.9 的自定義組件編譯模式才開始支持 onTabItemTap。

3.2.4 onNavigationBarButtonTap 參數說明

實例：

export default {
    onNavigationBarButtonTap(options) {
        console.log('index:' + options.index)
    }
}

3.2.5 onBackPress 參數說明

返回結果的格式是這樣的：event = {from:backbutton、 navigateBack}。
其中 backbutton 表示來源是左上角返回按鈕或 android 返回鍵；navigateBack 表示來源是 uni.navigateBack。

實例：

export default {
    onBackPress(options) {
        console.log('from:' + options.from)
    }
}

4. 函數執行順序

我們將生命周期函數放在一起執行，看一下生命周期函數的執行順序是怎樣的

4.1 實例

//App.vue
<script>
    export default {
        onLaunch: function() {
           console.log('應用生命周期onLaunch：應用初始化完成');
        },
        onShow: function() {
            console.log('應用生命周期onShow：應用啟動完成')
        },
        onHide: function() {
            console.log('應用生命周期onHide：應用進入到后臺狀態')
        }
    }
</script>

//首頁index.vue
<template></template>
<script>
    export default {
        onLoad() {
            console.log('頁面生命周期onLoad：頁面加載')
        },
        onShow() {
            console.log('頁面生命周期onShow：頁面顯示')
        },
        onReady(){
            console.log('頁面生命周期onReady：頁面初次渲染完成')
        },
        onHide() {
            console.log('頁面生命周期onHide：頁面隱藏')
        },
        onUnload() {
            console.log('頁面生命周期onUnload：頁面卸載')
        },
        onBackPress(){
            console.log('頁面生命周期onBackPress：頁面返回')
        },
        onShareAppMessage() {
            console.log('頁面生命周期onShareAppMessage：分享頁面')
        },
        onReachBottom() {
            console.log('頁面生命周期onReachBottom：上拉頁面觸底')
        },
        onPageScroll(){
            console.log('頁面生命周期onPageScroll：頁面滾動')
        },
        onPullDownRefresh() {
            console.log('頁面生命周期onPullDownRefresh：下拉頁面')
            uni.stopPullDownRefresh();
        },
        onNavigationBarButtonTap(){
            console.log('頁面生命周期onNavigationBarButtonTap：標題欄按鈕點擊')
        }
    }
</script>

打印結果如下：

應用生命周期onLaunch：應用初始化完成
應用生命周期onShow：應用啟動完成
頁面生命周期onLoad：頁面加載
頁面生命周期onShow：頁面顯示
頁面生命周期onReady：頁面初次渲染完成

切換到其他頁面，再切換回首頁。

應用生命周期onHide：應用進入到后臺狀態
頁面生命周期onHide：頁面隱藏
應用生命周期onShow：應用啟動完成
頁面生命周期onShow：頁面顯示

4.2 執行順序總結

應用生命周期函數要先于頁面生命周期函數執行。

4.2.1 應用生命周期執行順序

onLaunch > onShow > onHide，其他生命周期函數需要相應動作觸發才會執行。比如 onError 函數在應用出現錯誤才會被觸發。

4.2.2 頁面生命周期執行順序

onLoad > onShow > onReady > onHide，其他生命周期函數需要相應動作觸發才會執行。比如 onPullDownRefresh 函數在頁面下拉的時候才會被觸發。

5. 小結

本節課程我們主要學習了 uni-app 生命周期。本節課程的重點如下：

• 生命周期概念的理解；
• 各個生命周期函數的觸發機制以及語法；
• 生命周期函數的執行順序。