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

就是兩種方式：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

　 上代碼：

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

　　global.js  

let $navs = { //作用收集每個頁面的實例App；
};

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

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

$navs[className].preLoad(); //匹配到新頁面的實例，調(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:"大蘋果"
  }
 },
 mounted(){
 },
 methods :{
  to(){
  pre.$router("/pages/home/main","home"); //第二個參數(shù)是這個新頁面name字段值,用來從$navs從匹配此實例。
  }
 }
 };
 pre.$navs[m.name] = m; //把實例存儲到全局$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ù)加載新增preLoad生命周期的兩種方式,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

最新評論