前言：很多同學(xué)容易將小程序生命周期和頁面的生命周期混淆為一起，這兩個其實(shí)應(yīng)該是不同卻又相互關(guān)聯(lián)的生命周期，所以，用實(shí)際代碼操作并結(jié)合官方理論講講這個，好好捋捋。

小程序生命周期

• 首先小程序的生命周期函數(shù)是在app.js里面調(diào)用的，App(Object)函數(shù)用來注冊一個小程序。接受一個 Object 參數(shù)，指定其小程序的生命周期回調(diào)；一般有onLaunch監(jiān)聽小程序初始化、onShow監(jiān)聽小程序顯示、onHide監(jiān)聽小程序隱藏等生命周期回調(diào)函數(shù)。

小程序生命周期-截圖來自小程序官網(wǎng)

• 看文字對概念有點(diǎn)模糊對不對？理解概念的最好方法就是上手實(shí)際操作一遍。那么，我們來看看當(dāng)打開一個小程序的時候，到底是onLaunch、onShow、onHide哪個先調(diào)用以及什么時候開始調(diào)用的。

onLaunch() {
  console.log('onLaunch監(jiān)聽小程序初始化');
}

onShow() {
  console.log('onShow監(jiān)聽小程序顯示');
}

onHide() {
  console.log('onLaunch監(jiān)聽小程序隱藏');
}

打開小程序

點(diǎn)擊右上角按鈕隱藏小程序有再次進(jìn)入

• 從中我們可以知道小程序的生命周期函數(shù)的調(diào)用順序?yàn)椋?code>onLaunch>onShow>onHide

頁面的生命周期

• 頁面生命周期函數(shù)就是當(dāng)你每進(jìn)入/切換到一個新的頁面的時候，就會調(diào)用的生命周期函數(shù)。Page(Object) 函數(shù)用來注冊一個頁面。接受一個Object類型參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。
  

  頁面生命周期-截圖來自小程序官網(wǎng)

• 我們用代碼來演示下各個頁面生命周期函數(shù)的先后順序。

  onLoad(options) {
    console.log('onLoad監(jiān)聽頁面加載');
  }

  onReady() {
    console.log('onReady監(jiān)聽頁面初次渲染完成');
  }

  onShow() {
    console.log('onShow監(jiān)聽頁面顯示');
  }

  onHide() {
    console.log('onHide監(jiān)聽頁面隱藏');
  }

  onUnload() {
    console.log('onUnload監(jiān)聽頁面卸載');
  }

頁面生命周期函數(shù)

• 從中我們可以知道小程序的生命周期函數(shù)的調(diào)用順序?yàn)椋?code>onLoad>onShow>onReady。
• 至于onHide函數(shù)就是當(dāng)隱藏頁面的時候觸發(fā)。

小結(jié)

• 由此我們知道了小程序程序生命周期函數(shù)和頁面生命周期函數(shù)的調(diào)用順序，這兩者之間的事件順序一般如上圖所示小程序周期函數(shù)在前，頁面周期函數(shù)觸發(fā)在后。

• 但是這并不是絕對的，比如，有時候就會存在頁面onLoad函數(shù)比小程序app的onLaunch生命周期函數(shù)先調(diào)用的情況，那么這時候就可以用回調(diào)的方式的來處理。