uni-app 生命周期、語法

1. 前言

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

2. 什么是生命周期

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

2.1 生命周期分類

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

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

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

2.2 生命周期函數(shù)

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

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

3. 生命周期函數(shù)匯總

3.1 應用生命周期

前臺、后臺定義：

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

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

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

3.2 頁面生命周期

3.2.1 onLoad 參數(shù)說明

頁面生命周期函數(shù) onLoad，是頁面最先執(zhí)行的生命周期函數(shù)，如果從上個頁面跳轉(zhuǎn)到本頁面，可以通過參數(shù) option 傳遞上個頁面的數(shù)據(jù)。

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

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

//me.vue
export default {
    //options參數(shù)就是上個頁面?zhèn)鬟f過來的數(shù)據(jù)
    onLoad: function (options) {
        console.log(options.name);
    }
}

//打印出來的結(jié)果
我是首頁的數(shù)據(jù)

3.2.2 onPullDownRefresh 函數(shù)

用于監(jiān)聽該頁面用戶下拉頁面的動作。

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

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

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

調(diào)用完成 onPullDownRefresh 函數(shù)后，用 stopPullDownRefresh 函數(shù)可以停止當前頁面的下拉狀態(tài)。
實例：

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

3.2.3 onTabItemTap 參數(shù)說明

實例：

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，一定會觸發(fā)頁面切換。
• 如果想在 App 端實現(xiàn)點擊某個 tabitem 不跳轉(zhuǎn)頁面，不能使用 onTabItemTap，可以使用 plus.nativeObj.view 放一個區(qū)塊蓋住原先的 tabitem，并攔截點擊事件。
• 在 App 端，從 HBuilderX 1.9 的自定義組件編譯模式才開始支持 onTabItemTap。

3.2.4 onNavigationBarButtonTap 參數(shù)說明

實例：

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

3.2.5 onBackPress 參數(shù)說明

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

實例：

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

4. 函數(shù)執(zhí)行順序

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

4.1 實例

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

打印結(jié)果如下：

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

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

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

4.2 執(zhí)行順序總結(jié)

應用生命周期函數(shù)要先于頁面生命周期函數(shù)執(zhí)行。

4.2.1 應用生命周期執(zhí)行順序

onLaunch > onShow > onHide，其他生命周期函數(shù)需要相應動作觸發(fā)才會執(zhí)行。比如 onError 函數(shù)在應用出現(xiàn)錯誤才會被觸發(fā)。

4.2.2 頁面生命周期執(zhí)行順序

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

5. 小結(jié)

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

• 生命周期概念的理解；
• 各個生命周期函數(shù)的觸發(fā)機制以及語法；
• 生命周期函數(shù)的執(zhí)行順序。