微信小程序中的生命周期與生命周期函數(shù)淺析介紹
一、生命周期
概念
生命周期(Life Cycle)是指一個對象從創(chuàng)建-->運行-->銷毀的整個階段
小程序的生命周期
- 小程序啟動,表示生命周期的開始
- 小程序關(guān)閉。表示生命周期的結(jié)束
- 中間小程序的整個運行過程就是小程序的生命周期
分類
應(yīng)用生命周期
特指小程序從啟動-->運行-->銷毀的過程
頁面生命周期
特指小程序中每個頁面的加載-->渲染-->銷毀的整個過程
自定義組件生命周期
- 組件實例被創(chuàng)建
- 組件完全初始化完畢
- 組件進入頁面節(jié)點樹
- 組件離開頁面節(jié)點樹
其中,頁面的生命周期范圍較小,應(yīng)用程序的生命周期范圍較大,如圖:

二、生命周期函數(shù)
概念
是由小程序框架提供的內(nèi)置函數(shù) ,會伴隨著生命周期,自動按次序執(zhí)行
作用
允許程序員在特定的時間點,執(zhí)行某些特定的操作
分類
1)小程序應(yīng)用生命周期函數(shù)
伴隨著小程序的整個生命周期:啟動-->運行-->銷毀
需要在app.js文件中進行聲明,示例代碼如下:
App({
//小程序初始化完成會執(zhí)行onLaunch,全局只會觸發(fā)一次,用于頁面初始化相關(guān)工作
onLaunch:function(options){ },
//小程序啟動時或者從后臺進入前臺顯示時觸發(fā)onShow
onShow:function(options){ },
//小程序從前臺進入后臺時觸發(fā)onHide
onHide:function(options){ }
})2)小程序頁面生命周期函數(shù)
伴隨著小程序頁面的整個生命周期:加載-->渲染-->銷毀
需要在頁面.js文件中進行聲明,示例代碼如下:
Page({
onLoad:function(options){ },//監(jiān)聽頁面的加載,只會調(diào)用一次
onShow:function(options){ },//監(jiān)聽頁面顯示
onReady:function(options){ },//監(jiān)聽頁面初次渲染完成,只會調(diào)用一次
onHide:function(options){ },//監(jiān)聽頁面隱藏
onUnload:function(options){ },//監(jiān)聽頁面卸載,只會調(diào)用一次
})3)小程序自定義組件的生命周期函數(shù)
分別是created、attached、detached函數(shù)
第一,當(dāng)組件實例剛被創(chuàng)建完成,觸發(fā)created函數(shù)
- 但此時還不能調(diào)用setData函數(shù)
- 在這時間點,只用于給組件的this添加一些自定義的屬性字段
第二,當(dāng)組件完全初始化完畢進入頁面節(jié)點樹,觸發(fā)attached函數(shù)
- 此時,this.data已經(jīng)被初始化完畢
- 最為關(guān)鍵的生命周期,可以進行大多數(shù)初始化的工作,例如發(fā)送網(wǎng)絡(luò)請求獲取頁面的初始數(shù)據(jù)
第三,當(dāng)組件離開頁面節(jié)點樹后,觸發(fā)detached函數(shù)
- 退出一個頁面時,會觸發(fā)頁面內(nèi)每個自定義組件的detached函數(shù)
- 此時適合做一些清理性質(zhì)的收尾工作
組件全部的生命周期函數(shù)如下:

4)定義組件的生命周期函數(shù)
在小程序組件中,組件的生命周期函數(shù)的定義有新舊兩種方式
- 第一種,直接定義在Component構(gòu)造器內(nèi)與data節(jié)點平級的第一級參數(shù)中
- 第二種,可以在lifetimes字段內(nèi)進行聲明(推薦,其優(yōu)先級最高,且專門放生命周期函數(shù))
自定義組件.js文件
//定義組件生命周期函數(shù)的兩種方式
Component({
//推薦用法
lifetimes:{
attached(){ },
detached(){ },
}
//舊的定義方式,與data節(jié)點平級
attached(){ },
detached(){ },
})注:如果同時存在兩種新舊定義方式,那么舊的定義方式將會被覆蓋掉
三、總結(jié)
- 生命周期強調(diào)的是一個時間段,一個過程
- 生命周期函數(shù)強調(diào)的是某個時間點,是過程中的某個節(jié)點
- 注意區(qū)別不同類別的生命周期函數(shù),不能搞混淆
到此這篇關(guān)于微信小程序中的生命周期與生命周期函數(shù)淺析介紹的文章就介紹到這了,更多相關(guān)小程序生命周期內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
ECHO.js 純javascript輕量級延遲加載的實例代碼
下面小編就為大家?guī)硪黄狤CHO.js 純javascript輕量級延遲加載的實例代碼。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
JavaScript+css+HTML實現(xiàn)移動端輪播圖(含源碼)
這篇文章主要介紹了JavaScript+css+HTML實現(xiàn)移動端輪播圖并含源碼的分享,需要的小伙伴可以參考一下,希望對你有所幫助2022-01-01
JS判斷移動端訪問設(shè)備并加載對應(yīng)CSS樣式
JS判斷不同web訪問環(huán)境,主要針對移動設(shè)備,提供相對應(yīng)的解析方案,本例是加載不同的css樣式2014-06-06

