小程式分為應用、頁面和元件三個部分,所以小程式的生命週期涉及到的知識點有一下幾個:
2、頁面的生命週期:page
3、元件的生命週期:component
4、應用的生命週期對頁面生命週期的影響
},onshow: function(options) ,
onhide: function() ,
onerror: function(msg) ,
onpagenotfound: function(res) ,
globaldata:
'i am global data'
})使用者首次開啟小程式,觸發 onlaunch 方法(全域性只觸發一次)。
小程式初始化完成後,觸發 onshow 方法,監聽小程式顯示。
小程式從前台進入後台,觸發 onhide 方法。
小程式從後台進入前台顯示,觸發 onshow 方法。
小程式後台執行一定時間,或系統資源占用過高,會被銷毀。
page(object)
函式用來註冊乙個頁面。接受乙個object
型別引數,其指定頁面的初始資料、生命週期**、事件處理函式等。
page(,
onload: function(options) ,
onready: function() ,
onshow: function() ,
onhide: function() ,
onunload: function() ,
onpulldownrefresh: function() ,
onreachbottom: function() ,
// 使用者點選右上角**
},onpagescroll: function() ,
onresize: function() ,
ontabitemtap(item) ,
// 任意的函式,在頁面的函式中用 this 可以訪問
viewtap: function() , function() )
},// 任意資料,在頁面的函式中用 this 可以訪問
customdata:
})
總結
檢視執行緒有四大狀態:
初始化狀態:初始化檢視執行緒所需要的工作,初始化完成後向 「服務執行緒」傳送初始化完成訊號,然後進入等待狀態,等待服務執行緒提供初始化資料。
首次渲染狀態:當收到服務執行緒提供的初始化資料後(json和js中的data資料),渲染小程式介面,渲染完畢後,傳送「首次渲染完成訊號」給服務執行緒,並將頁面展示給使用者。
持續渲染狀態:此時介面執行緒繼續一直等待「服務執行緒」通過this.setdata()函式傳送來的介面資料,只要收到就重新區域性渲染,也因此只要更新資料並傳送訊號,介面就自動更新。
結束狀態:頁面被**或者銷毀、應用被系統**、銷毀時觸發。
服務執行緒五大狀態:
初始化狀態:此階段僅啟動服務執行緒所需的基本功能,比如訊號傳送模組。系統的初始化工作完畢,就呼叫自定義的onload和onshow,然後等待檢視執行緒的「初始化完成」。onload是只會首次渲染的時候執行一次,onshow是每次介面切換都會執行。
等待啟用狀態:接收到「檢視執行緒初始化完成」訊號後,將初始化資料傳送給「檢視執行緒」,等待檢視執行緒完成初次渲染。
啟用狀態:收到檢視執行緒傳送來的「首次渲染完成」訊號後,就進入啟用狀態既程式的正常執行狀態,並呼叫自定義的onready()函式。此狀態下就可以通過 this.setdata 函式傳送介面資料給介面執行緒進行區域性渲染,更新頁面。
後台執行狀態:如果介面進入後台,服務執行緒就進入後台執行狀態,從目前的官方解讀來說,這個狀態挺奇怪的,和啟用狀態是相同的,也可以通過setdata函式更新介面的。畢竟小程式的框架剛推出,應該後續會有很大不同吧。
結束狀態:頁面被**或者銷毀、應用被系統**、銷毀時觸發。
另: 寫過react的童鞋都知道,react 中使用了 will、 did、should 等一系列有時態語義的詞彙命名鉤子函式。小程式中,統一使用on,那麼on是在行為前還是行為後,從例項生命週期圖中,我們可以明顯看到:鉤子觸發執行時機都是在事件完成之後觸發的。例如元件的生命週期,指的是元件自身的一些函式,這些函式在特殊的時間點或遇到一些特殊的框架事件時被自動觸發。set to background
之後onhode
。
其中,最重要的生命週期是 created attached detached ,包含乙個元件例項生命流程的最主要時間點。
created 元件例項化,但節點樹還未匯入,因此這時不能用setdata
attached 元件初始化完畢,節點樹完成,可以用setdata渲染節點,但無法操作節點
ready 元件布局完成,這時可以獲取節點資訊,也可以操作節點
moved 元件例項被移動到樹的另乙個位置
detached 元件例項從節點樹中移
元件所在頁面的生命週期, 指的是那些並非與元件有很強的關聯,但有時元件需要獲知,以便元件內部處理的生命週期,在 pagelifetimes 定義段中定義。
show 元件所在的頁面被展示時執行
hide 元件所在的頁面被隱藏時執行
resize 元件所在的頁面尺寸變化時執行
component(,
attached() ,
ready() ,
moved() ,
detached() ,
error(err)
},pagelifetimes: ,
hide() ,
resize(size)
},// 以下是舊式的定義方式,可以保持對 <2.2.3 版本基礎庫的相容
attached() ,
detached() ,
// ...
})
我們來看圖:應用生命週期影響頁面生命週期小程式初始化完成後,頁面首次載入觸發onload,只會觸發一次。
當小程式進入到後台,先執行頁面onhide方法再執行應用onhide方法。
當小程式從後台進入到前台,先執行應用onshow方法再執行頁面onshow方法。
component created
component attached
page onload
component show
page onshow
component ready
page onready
page onunload
component detached
小程式總結
const share 函式名 funciton onshowarticle1 function e onshowarticle2 function e 第一步,在相對應的頁面的json 檔案中 開啟此功能 enablepulldownrefresh true,onpulldownrefresh f...
小程式的總結
0.1.關於頁面載入 生命週期函式 2.首頁的登入和校驗 3.function getdata url,data,types else return new promise function resolve,reject success function res fail function res ...
程式猿面試總結
良好的開端是成功的一半所以面試時第一印象很重,盡量在技術面試之前就抓住hr小姐姐和面試官的眼球,以下我總結了幾點 1 著裝簡單大方 乾淨整潔 不要油頭髮亮的。2 談吐目視對方,一方面表示尊重,其次這也是自信的表現。有些人可能不習慣一直看著對方眼睛也能理解,教你一種方法,看著對方的額頭就好也不要傻乎乎...