您好,登錄后才能下訂單哦!
這篇文章主要介紹mpvue頁(yè)面預(yù)加載新增preLoad生命周期的方式有哪些,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
存在的必要性: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
<template> <div class="joy-content"> <h5 class="normal-style" hover-stay-time="100" @tap="to">{{name}}</h5> </div> </template> <script> import pre from "@/utils/global" let m = { name:"material", data(){ return { name:"大蘋(píng)果" } }, mounted(){ }, methods :{ to(){ pre.$router("/pages/home/main","home"); //第二個(gè)參數(shù)是這個(gè)新頁(yè)面name字段值,用來(lái)從$navs從匹配此實(shí)例。 } } }; pre.$navs[m.name] = m; //把實(shí)例存儲(chǔ)到全局$navs中; export default m; </script> <style scoped lang="scss"> </style>
home index.vue
<template> <div>{{info}}</div> </template> <script> import pre from "@/utils/global" let data = { info:"1111" } let h = { name:"home", data(){ return data; }, mounted(){ }, preLoad(){ data.info = "pppppp"; } }; pre.$navs[h.name] = h; export default h; </script> <style scoped> </style>
以上是“mpvue頁(yè)面預(yù)加載新增preLoad生命周期的方式有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。