小程序頁面onload(),onready()加載順序詳解

更新時間：2022年02月10日 10:14:42 作者：幻想的小飛

本文主要介紹了小程序頁面onload(),onready()加載順序，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

小程序

onLoad(Object query) 頁面加載時觸發(fā)。一個頁面只會調(diào)用一次，可以在 onLoad
的參數(shù)中獲取打開當(dāng)前頁面路徑中的參數(shù)。
onShow() 頁面顯示/切入前臺時觸發(fā)。
onReady() 頁面初次渲染完成時觸發(fā)。一個頁面只會調(diào)用一次，代表頁面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。

所以加載順序是先加載onLoad，再是onShow，最后onReady

原生JS

document.ready 表示文檔結(jié)構(gòu)加載完成（不包含圖片等非文字媒體文件）；ready如果定義多個，都會按渲染順序執(zhí)行。
window.onload 包含圖片等在內(nèi)的所有元素都加載完成。但是，onload不管定義多少個，只執(zhí)行一個（最后一個）

所以加載順序是先加載ready，后onload，正好和小程序相反

Jquery

( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) ，簡寫 (document).ready(function(){})，簡寫(document).ready(function())，簡寫(function(){});組件生命周期

?Component({
? ? ? ? properties:{
? ? ? ? ? ? innerText:{
? ? ? ? ? ? ? ? type:String
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? data:{

? ? ? ? },
? ? ? ? methods:{

? ? ? ? },
? ? ? ? created:function(){
? ? ? ? ? ? // 組件生命周期函數(shù)，在組件實例進(jìn)入頁面節(jié)點樹時執(zhí)行，注意此時不能調(diào)用setData
? ? ? ? ? ? console.log('Component-1 >> created');
? ? ? ? },
? ? ? ? attached:function(){
? ? ? ? ? ? // 組件生命周期函數(shù)，在組件實例進(jìn)入頁面節(jié)點樹時執(zhí)行。
? ? ? ? ? ? console.log('Component-1 >> attached');
? ? ? ? },
? ? ? ? ready:function(){
? ? ? ? ? ? // 在組件布局完成后執(zhí)行，此時可以獲取節(jié)點信息
? ? ? ? ? ? console.log('Component-1 >> ready');
? ? ? ? },
? ? ? ? moved:function(){
? ? ? ? ? ? // 在組件實例被移動到節(jié)點樹另一個位置時執(zhí)行
? ? ? ? ? ? console.log('Component-1 >> moved');
? ? ? ? },
? ? ? ? detached:function(){
? ? ? ? ? ? // 在組件實例被從頁面節(jié)點樹移除時執(zhí)行
? ? ? ? ? ? console.log('Component-1 >> detached');
? ? ? ? },
? ? ? ? lifetimes:{
? ? ? ? ? ? // 組件生命周期聲明對象，將組件的生命周期收歸到該字段進(jìn)行聲明，原有聲明方式仍舊有效，如同時存在兩種聲明方式，則lifetimes字段內(nèi)聲明方式優(yōu)先級最高
? ? ? ? ? ? created:function(){
? ? ? ? ? ? ? ? console.log('Component-1 lifetimes >> created');
? ? ? ? ? ? },
? ? ? ? ? ? attached:function(){
? ? ? ? ? ? ? ? console.log('Component-1 lifetimes >> attached');
? ? ? ? ? ? },
? ? ? ? ? ? ready:function(){
? ? ? ? ? ? ? ? console.log('Component-1 lifetimes >> ready');
? ? ? ? ? ? },
? ? ? ? ? ? moved:function(){
? ? ? ? ? ? ? ? console.log('Component-1 lifetimes >> moved');
? ? ? ? ? ? },
? ? ? ? ? ? detached:function(){
? ? ? ? ? ? ? ? console.log('Component-1 lifetimes >> detached');
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? pageLifetimes:{
? ? ? ? ? ? // 組件所在頁面的生命周期聲明對象，目前僅支持頁面的show和hide兩個生命周期
? ? ? ? ? ? show:function(){
? ? ? ? ? ? ? ? console.log('Component-1 pageLifetimes >> Show');
? ? ? ? ? ? },
? ? ? ? ? ? hide:function(){
? ? ? ? ? ? ? ? console.log('Component-1 pageLifetimes >> Hide');
? ? ? ? ? ? }
? ? ? ? }

? ? })

可以看到組件中只執(zhí)行了lifetimes中的生命周期函數(shù)，外層的生命周期函數(shù)并沒有執(zhí)行。而且可以看到先執(zhí)行組件的created/attached函數(shù)，隨后執(zhí)行頁面的onLoad/onShow，再執(zhí)行組件的ready，最后執(zhí)行頁面的onReady，這是頁面中引入組件時組件的生命周期函數(shù)執(zhí)行順序。

現(xiàn)行玩所有組件的created，再執(zhí)行所有組件的attached,然后執(zhí)行頁面的onLoad和onShow，再執(zhí)行所有組件的ready，最后執(zhí)行頁面的onReady。當(dāng)頁面被卸載時，先執(zhí)行頁面的onUnload，再執(zhí)行組件的detached。頁面不卸載，不會觸發(fā)組件的detached

到此這篇關(guān)于小程序頁面onload(),onready()加載順序詳解的文章就介紹到這了,更多相關(guān)小程序onload(),onready()加載順序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: