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

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

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

小程序

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

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

原生JS

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

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

Jquery

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

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

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

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

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

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

您可能感興趣的文章: