詳解微信小程序應(yīng)用和頁面生命周期
什么是生命周期
生命周期(Life Cycle)是指一個(gè)對(duì)象從創(chuàng)建→>運(yùn)行>銷毀的整個(gè)階段,強(qiáng)調(diào)的是一個(gè)時(shí)間段。如:
- 張三出生,表示這個(gè)人生命周期的開始
- 張三離世,表示這個(gè)人生命周期的結(jié)束
- 中間張三的一生,就是張三的生命周期
我們可以把每個(gè)小程序運(yùn)行的過程,也概括為生命周期:
- 小程序的啟動(dòng),表示生命周期的開始
- 小程序的關(guān)閉,表示生命周期的結(jié)束
- 中間小程序運(yùn)行的過程,就是小程序的生命周期
生命周期的分類
在小程序中,生命周期分為兩類,分別是:
- 應(yīng)用生命周期
特指小程序從啟動(dòng)->運(yùn)行->銷毀的過程
- 頁面生命周期
特指小程序中,每個(gè)頁面的加載->渲染->銷毀的過程
其中,頁面的生命周期范圍較小,應(yīng)用程序的生命周期范圍較大:
生命周期函數(shù)
生命周期函數(shù):是由小程序框架提供的內(nèi)置函數(shù),會(huì)伴隨著生命周期,自動(dòng)按次序執(zhí)行。
生命周期函數(shù)的作用:允許程序員在特定的時(shí)間點(diǎn),執(zhí)行某些特定的操作。例如,頁面剛加載的時(shí)候,可以在onLoad生命周期函數(shù)中初始化頁面的數(shù)據(jù)。
注意:生命周期強(qiáng)調(diào)的是時(shí)間段,生命周期函數(shù)強(qiáng)調(diào)的是時(shí)間點(diǎn)。
小程序中的生命周期函數(shù)分為兩類,分別是:
應(yīng)用的生命周期函數(shù)
特指小程序從啟動(dòng)->運(yùn)行-→>銷毀期間依次調(diào)用的那些函數(shù)頁面的生命周期函數(shù)
特指小程序中,每個(gè)頁面從加載->渲染-→>銷毀期間依次調(diào)用的那些函數(shù) 小程序的應(yīng)用生命周期函數(shù)
小程序的應(yīng)用生命周期函數(shù)需要在app.js
中進(jìn)行聲明。如:
App({ /** * 當(dāng)小程序初始化完成時(shí),會(huì)觸發(fā) onLaunch(全局只觸發(fā)一次) */ onLaunch: function () { console.log("小程序啟動(dòng)!"); }, /** * 當(dāng)小程序啟動(dòng),或從后臺(tái)進(jìn)入前臺(tái)顯示,會(huì)觸發(fā) onShow */ onShow: function (options) { console.log('小程序正在前臺(tái)運(yùn)行!'); }, /** * 當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái),會(huì)觸發(fā) onHide */ onHide: function () { console.log("小程序進(jìn)入后臺(tái)運(yùn)行!"); }, /** * 當(dāng)小程序發(fā)生腳本錯(cuò)誤,或者 api 調(diào)用失敗時(shí),會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息 */ onError: function (msg) { } })
- 用戶首次打開小程序,觸發(fā) onLaunch(全局只觸發(fā)一次)。
- 小程序初始化完成后,觸發(fā)onShow方法,監(jiān)聽小程序顯示。
- 小程序從前臺(tái)進(jìn)入后臺(tái),觸發(fā) onHide方法。
- 小程序從后臺(tái)進(jìn)入前臺(tái)顯示,觸發(fā) onShow方法。
- 小程序后臺(tái)運(yùn)行一定時(shí)間,或系統(tǒng)資源占用過高,會(huì)被銷毀。
屬性 | 類型 | 描述 | 觸發(fā)時(shí)機(jī) |
---|---|---|---|
onLaunch | Function | 監(jiān)聽小程序初始化 | 當(dāng)小程序初始化完成時(shí),會(huì)觸發(fā) onLaunch(全局只觸發(fā)一次)。 |
onShow | Function | 監(jiān)聽小程序顯示 | 當(dāng)小程序啟動(dòng),或從后臺(tái)進(jìn)入前臺(tái)顯示,會(huì)觸發(fā) onShow |
onHide | Function | 監(jiān)聽小程序隱藏 | 當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái),會(huì)觸發(fā) onHide |
onError | Function | 錯(cuò)誤監(jiān)聽函數(shù) | 當(dāng)小程序發(fā)生腳本錯(cuò)誤,或者 api 調(diào)用失敗時(shí),會(huì)觸發(fā) onError 并帶上錯(cuò)誤信息 |
其他 | Any | 開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 Object 參數(shù)中,用 this 可以訪問,上面的getPics就是函數(shù), globalName是數(shù)據(jù),這里面的函數(shù)和數(shù)據(jù)都是全局的。調(diào)用方式:在Pager中通過getApp()方法得到App對(duì)象并獲得全局的數(shù)據(jù)和調(diào)用全局的函數(shù) |
前臺(tái)、后臺(tái)定義: 當(dāng)用戶點(diǎn)擊左上角關(guān)閉,或者按了設(shè)備 Home 鍵離開微信小程序并沒有直接銷毀,而是進(jìn)入了后臺(tái);當(dāng)再次進(jìn)入微信或再次打開小程序,又會(huì)從后臺(tái)進(jìn)入前臺(tái)。
小程序的頁面生命周期函數(shù)
小程序的頁面生命周期函數(shù)需要在頁面.js
中進(jìn)行聲明。如:
Page({ /** * 頁面的初始數(shù)據(jù) */ data: { }, /** * 生命周期函數(shù)--監(jiān)聽頁面加載 */ onLoad(options) { console.log('本地生活頁面加載完畢'); }, /** * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 */ onReady() { console.log("初次渲染完畢!"); }, /** * 生命周期函數(shù)--監(jiān)聽頁面顯示 */ onShow() { console.log("頁面顯示完成"); }, /** * 生命周期函數(shù)--監(jiān)聽頁面隱藏 */ onHide() { console.log("頁面已被隱藏!"); }, /** * 生命周期函數(shù)--監(jiān)聽頁面卸載 */ onUnload() { console.log("GG"); }, /** * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作 */ onPullDownRefresh() { console.log('正在刷新!'); }, /** * 頁面上拉觸底事件的處理函數(shù) */ onReachBottom() { console.log('正在加載更多!'); }, /** * 用戶點(diǎn)擊右上角分享 */ onShareAppMessage() { console.log('用戶正在分享!'); } })
- 小程序注冊(cè)完成后,加載頁面,觸發(fā)onLoad方法。
- 頁面載入后觸發(fā)onShow方法,顯示頁面。
- 首次顯示頁面,會(huì)觸發(fā)onReady方法,渲染頁面元素和樣式,一個(gè)頁面只會(huì)調(diào)用一次。
- 當(dāng)小程序后臺(tái)運(yùn)行或跳轉(zhuǎn)到其他頁面時(shí),觸發(fā)onHide方法。
- 當(dāng)小程序有后臺(tái)進(jìn)入到前臺(tái)運(yùn)行或重新進(jìn)入頁面時(shí),觸發(fā)onShow方法。
- 當(dāng)使用重定向方法wx.redirectTo(OBJECT)或關(guān)閉當(dāng)前頁返回上一頁wx.navigateBack(),觸發(fā)onUnload。
函數(shù) | 說明 | 作用 |
---|---|---|
onLoad | 生命周期回調(diào)—監(jiān)聽頁面加載 | 發(fā)送請(qǐng)求獲取數(shù)據(jù) |
onShow | 生命周期回調(diào)—監(jiān)聽頁面顯示 | 請(qǐng)求數(shù)據(jù) |
onReady | 生命周期回調(diào)—監(jiān)聽頁面初次渲染完成 | 獲取頁面元素(少用) |
onHide | 生命周期回調(diào)—監(jiān)聽頁面隱藏 | 終止任務(wù),如定時(shí)器或者播放音樂 |
onUnload | 生命周期回調(diào)—監(jiān)聽頁面卸載 | 終止任務(wù) |
- 小程序初始化完成后,頁面首次加載觸發(fā)onLoad,只會(huì)觸發(fā)一次。
- 當(dāng)小程序進(jìn)入到后臺(tái),先執(zhí)行頁面onHide方法再執(zhí)行應(yīng)用onHide方法。
- 當(dāng)小程序從后臺(tái)進(jìn)入到前臺(tái),先執(zhí)行應(yīng)用onShow方法再執(zhí)行頁面onShow方法。
實(shí)例演示:
監(jiān)聽事件:
到此這篇關(guān)于微信小程序應(yīng)用和頁面生命周期的文章就介紹到這了,更多相關(guān)小程序應(yīng)用和頁面生命周期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
利用js讀取動(dòng)態(tài)網(wǎng)站從服務(wù)器端返回的數(shù)據(jù)
這篇文章主要介紹了利用js讀取動(dòng)態(tài)網(wǎng)站從服務(wù)器端返回的數(shù)據(jù),需要的朋友可以參考下2014-02-02JavaScript顯示當(dāng)然日期和時(shí)間即年月日星期和時(shí)間
使用js顯示當(dāng)然日期和時(shí)間在網(wǎng)頁中很是常見,方法有很多,不過多說大同小異,下面有個(gè)不錯(cuò)的示例,需要的朋友可以感受下2013-10-10JavaScript實(shí)現(xiàn)一個(gè)前端會(huì)魔法的旋轉(zhuǎn)魔方相冊(cè)
星光不問趕路人,時(shí)光不誤有心人,牛牛最近學(xué)到了一個(gè)神奇的旋轉(zhuǎn)魔方,今天就來分享給大家吧,希望大家能喜歡2022-06-06JavaScript數(shù)組方法的錯(cuò)誤使用例子
在本篇文章中我們給大家分享了幾種使用JavaScript數(shù)組容易出錯(cuò)的例子,需要的朋友們可以參考下。2018-09-09詳解javascript的變量與標(biāo)識(shí)符
這篇文章主要為大家介紹了javascript的變量與標(biāo)識(shí)符,感興趣的小伙伴們可以參考一下2016-01-01js下為表格內(nèi)部動(dòng)態(tài)添加行的代碼
最近的一個(gè)項(xiàng)目中在保存表單數(shù)據(jù)時(shí),要用到一個(gè)動(dòng)態(tài)添加行的功能。平時(shí)動(dòng)態(tài)添加行只是在表格的最下面添加,現(xiàn)在在表格中間動(dòng)態(tài)添加行,而且表格內(nèi)部是包含并且單元格的,其實(shí)很簡(jiǎn)單,下面貼出代碼。2010-06-06