這篇文章主要介紹mpvue頁(yè)面預(yù)加載新增preLoad生命周期的方式有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

專注于為中小企業(yè)提供成都網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)裕華免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

存在的必要性：mpvue開(kāi)發(fā)微信小程序，在頁(yè)面跳轉(zhuǎn)到新頁(yè)面的過(guò)程中會(huì)有200ms左右的延遲，這個(gè)200ms如果用來(lái)請(qǐng)求新頁(yè)面的接口，那么跳轉(zhuǎn)到新頁(yè)面或許已經(jīng)渲染好了頁(yè)面。

就是兩種方式：

1.新頁(yè)面跳轉(zhuǎn)之前，就請(qǐng)求新頁(yè)面數(shù)據(jù)。

2.跳轉(zhuǎn)到新頁(yè)面后，再請(qǐng)求數(shù)據(jù)，可能還會(huì)有一個(gè)loading的狀態(tài)。

第二種方式是正常的的頁(yè)面跳轉(zhuǎn)，不say了。

這里講解的都是第一種方式：

從上面結(jié)構(gòu)圖可以看出系統(tǒng)跳轉(zhuǎn)的延時(shí)時(shí)間可以用來(lái)請(qǐng)求新數(shù)據(jù)，大大提高了用戶體驗(yàn)性。

方案是有了，該怎么實(shí)現(xiàn)呢。

我們知道m(xù)pvue的生命周期有onLoad mounted onShow 等。

我們自建一個(gè)preLoad生命周期進(jìn)行頁(yè)面預(yù)加載邏輯處理。

是不是有個(gè)疑問(wèn)，怎么讓程序執(zhí)行我們的這個(gè)preLoad生命周期呢？

講解一下vue的執(zhí)行機(jī)制：

mpvue創(chuàng)建每個(gè)頁(yè)面都會(huì)有個(gè)main.js文件，執(zhí)行了app = new Vue(app);在項(xiàng)目初始化時(shí)，都會(huì)先被執(zhí)行，push到一個(gè)數(shù)組里，這就是小程序頁(yè)面堆棧的原理了。

原先的頁(yè)面跳轉(zhuǎn)，會(huì)執(zhí)行這個(gè)App中的生命周期函數(shù)。找到一點(diǎn)靈感有沒(méi)有，我們可以在初始化時(shí)，對(duì)這個(gè) App from './index' 的App對(duì)象進(jìn)行全局儲(chǔ)存。在跳轉(zhuǎn)時(shí)同時(shí)對(duì)執(zhí)行App中preLoad函數(shù)進(jìn)行調(diào)用，而小程序正常執(zhí)行App生命周期，

當(dāng)preLoad執(zhí)行完后把數(shù)據(jù)傳給App return 中的這個(gè)對(duì)象，就實(shí)現(xiàn)了渲染更新。

export default{
 data(){
 return {} //把數(shù)據(jù)傳到這個(gè)對(duì)象上
 }  
}

上代碼：

兩個(gè)頁(yè)面，展示從joy-material 跳轉(zhuǎn)到home的過(guò)程

global.js  

let $navs = { //作用收集每個(gè)頁(yè)面的實(shí)例App；
};

let $router =(path,className)=>{ //每個(gè)頁(yè)面實(shí)例都會(huì)有個(gè)name字段，進(jìn)行$navs匹配

setTimeout(()=>{
 wx.navigateTo({
  url:path
 });
 },150);

$navs[className].preLoad(); //匹配到新頁(yè)面的實(shí)例，調(diào)用preLoad函數(shù)，不影響正常跳轉(zhuǎn)。
 
};
export default {
 $navs:$navs,
 $router:$router
};

joy-material index.vue

home index.vue

以上是“mpvue頁(yè)面預(yù)加載新增preLoad生命周期的方式有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！