微信小程序打夯之旅（十一）：生命週期

頁面生命週期

官方文檔直接飛機票：點擊起飛javascript

生命週期	說明
onLoad	頁面加載時觸發，如首次打開頁面，此時頁面元素尚未渲染完成
onShow	頁面從後臺切換到前臺時觸發，頁面加載時也會觸發
onReady	頁面首次渲染完成時觸發
onHide	頁面從前臺切換到後臺時觸發，如退出小程序、退出微信、切換到其餘頁面等
onUnload	頁面被銷燬前觸發，可是不能進行顯示彈窗等行爲，也不能阻斷銷燬過程
onResize	頁面大小發生變化時觸發，如開啓屏幕旋轉功能

首次打開一個頁面依次觸發：onLoad -> onShow -> onReady
二次打開一個 tabbar 頁面：只觸發 onShow，由於有緩存
二次打開一個非 tabbar 頁面：onLoad -> onShow -> onReady
關閉一個二級頁面：觸發 onUnload，此時能夠關閉一些定時器、關閉播放器等
關閉小程序：觸發 onHide，可用於統計用戶停留時長、暫停定時器等。

onLoad 和 onReady 比較

onLoad 是在頁面渲染完成前觸發，onReady 是在頁面渲染完成後觸發。可是微信並無提供同步獲取元素信息的接口(createSelectorQuery 是異步的)，因此從業務角度出發這兩個生命週期是同樣的，由於 onLoad 相比於 onReady 更早一些，並且頁面參數的獲取也由 onLoad 完成，因此通常只使用 onLoad。html

組件生命週期

官方文檔直接火車票：點擊發車java

生命週期	說明
created	組件剛剛被建立時觸發，此時組件尚未初始化，調用 `setData` 是無效的
attached	組件進入節點樹時觸發，此時組件尚未渲染完成，可是能夠調用 `setData`
ready	組件渲染完成時觸發
moved	組件被移動到節點樹另外一個位置時觸發 `我至今不知道什麼狀況會移動組件位置！有沒有大神解答一下`
detached	組件從節點樹移除時觸發，如經過 `wx:if` 控制組件隱藏

以上是組件內部的生命週期，下面是組件內監聽頁面級生命週期的方法小程序

生命週期	說明
show	與頁面的生命週期 `onShow` 相同
hide	與頁面的生命週期 `onHide` 相同
resize	與頁面的生命週期 `onResize` 相同

注意

組件內監聽頁面生命週期的方式和監聽組件生命週期的方式是不一樣的，好比說 ready 和 showapi

Component({
    ready() {
        console.log('component ready');
    },
    // 頁面生命週期須要放在 pageLifetimes 裏面
    pageLifetimes: {
        show() {
            console.log('page onShow');
        } 
    }
});
複製代碼

小程序生命週期

官方文檔直接自行車票：點擊出發緩存

生命週期	說明
onLaunch	小程序首次運行，可用於初始化公共能力，如加強 `Page` 能力點擊查看
onShow	小程序首次啓動或者切到前臺，可用於統計用戶停留時長等信息
onHide	小程序切到後臺，如關閉小程序、退出微信、接電話等行爲