存在的必要性：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ù)，大大提高了用戶(hù)體驗(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">
 <h4 class="normal-style" hover-stay-time="100" @tap="to">{{name}}</h4>
 </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>

總結(jié)

以上所述是小編給大家介紹的mpvue 頁(yè)面預(yù)加載新增preLoad生命周期的兩種方式,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論