2.4　生命周期與頁面跳轉(zhuǎn)

在Android、iOS開發(fā)中，每個頁面都有屬于自己的生命周期，包括創(chuàng)建頁面執(zhí)行、進入頁面執(zhí)行、離開頁面執(zhí)行等。微信小程序的頁面樣式與App非常相似，所以生命周期也大體相同。在一個應(yīng)用有了頁面后，它們之間就要進行跳轉(zhuǎn)、返回了，這就是所謂的頁面跳轉(zhuǎn)功能。本節(jié)將會創(chuàng)建一個新的Demo，講一講頁面的生命周期與跳轉(zhuǎn)。

2.4.1　生命周期函數(shù)

【示例2-4】

（1）新建一個項目PageTest，AppID選擇測試號，如圖2.3所示。

（2）創(chuàng)造兩個頁面，用于本節(jié)的演示。新建兩個文件夾home、detail，并在文件夾下創(chuàng)建同名的Page。之后刪除項目自動生成的index、logs這兩個文件夾，如圖2.4所示。

（3）現(xiàn)在可能會報錯：找不到index和logs頁面。只需要在app.json中刪除依賴即可，代碼如下：

（4）將app.js中多余的代碼都刪除掉，代碼如下：

（5）現(xiàn)在準(zhǔn)備工作已經(jīng)完成。打開home.js，可以看到里面已經(jīng)生成了一些代碼，刪掉無用的代碼，給生命周期函數(shù)加上注釋和console.log來監(jiān)控它們的執(zhí)行狀態(tài)，代碼如下：

（6）運行代碼，可以看到控制臺中的輸出，如圖2.5所示。

通過輸出項，我們可以得出以下幾個結(jié)論：

·　執(zhí)行順序為onLoad、onShow、onReady。

·　onLoad方法在創(chuàng)建時會執(zhí)行，只執(zhí)行一次，可以進行一些數(shù)據(jù)操作。

·　onShow方法會在頁面返回時執(zhí)行，下一節(jié)會進行測試。

·　onReady方法會在頁面渲染完成后執(zhí)行一次，可以執(zhí)行一些UI操作。

頁面的切換和隱藏通常是在頁面跳轉(zhuǎn)時發(fā)生的，所以剩下的幾個方法和onShow方法的測試留到下一小節(jié)。

2.4.2　頁面跳轉(zhuǎn)

在上一小節(jié)，我們對組件的生命周期做了講解，本小節(jié)中主要講解頁面跳轉(zhuǎn)，并結(jié)合起來深入解釋生命周期。

想要進行頁面跳轉(zhuǎn)，主要有兩種方法，下面通過示例來說明。

【示例2-5】

本例實現(xiàn)了從home頁跳轉(zhuǎn)到detail頁，代碼如下：

（1）方法一：這個跳轉(zhuǎn)方式最為常見，創(chuàng)造一個按鈕，然后在wxs中實現(xiàn)點擊事件，其中url填寫跳轉(zhuǎn)頁面的相對路徑即可。

（2）方法二：利用微信提供的navigator組件，可以直接通過設(shè)置url和open-type實現(xiàn)跳轉(zhuǎn)。navigator是導(dǎo)航組件的一種，在后面的章節(jié)會有詳細講解，當(dāng)前優(yōu)先使用在JS中完成跳轉(zhuǎn)的方法。

接下來點擊頁面跳轉(zhuǎn)，可以看到控制臺輸出，如圖2.6所示。

可以看到，在頁面跳轉(zhuǎn)的時候輸出了“執(zhí)行onHide”，那么為什么沒有出現(xiàn)“執(zhí)行onUnload”呢？因為跳轉(zhuǎn)頁面后home頁只是隱藏的，并沒有被銷毀。

為了測試onUnload方法的執(zhí)行，我們可以在detail.js的onUnload方法中添加輸出，代碼如下：

重新運行程序進行測試，在頁面跳轉(zhuǎn)后，單擊左上角的返回按鈕，可以看到控制臺的輸出，如圖2.7所示。

從圖2.7中可以看到，離開detail頁時執(zhí)行了onUnload方法，離開時再次進入了home頁，所以onShow方法也再次執(zhí)行了。

最后介紹onUnload和onShow的應(yīng)用場景。比如一個頁面有一個計時器，我們想在頁面銷毀的時候進行關(guān)閉，就可以把停止方法寫在onUnload方法中，如果寫在onHide方法中，就可能會出現(xiàn)返回后計時器中斷的現(xiàn)象。onShow方法一般用于頁面刷新，比如再次返回該頁面，想要刷新數(shù)據(jù)時，就可以把網(wǎng)絡(luò)請求寫在onShow方法中，保持頁面數(shù)據(jù)為最新。只要靈活掌握這幾個生命周期方法，本節(jié)的任務(wù)就算完成了。