mpvue 頁面預加載,新增preLoad生命週期

存在的必要性:mpvue開發微信小程序,在頁面跳轉到新頁面的過程當中會有200ms左右的延遲,這個200ms若是用來請求新頁面的接口,那麼跳轉到新頁面或許已經渲染好了頁面。javascript

就是兩種方式:css

1.新頁面跳轉以前,就請求新頁面數據。vue

2.跳轉到新頁面後,再請求數據,可能還會有一個loading的狀態。java

  

第二種方式是正常的的頁面跳轉,不say了。小程序

這裏講解的都是第一種方式:微信小程序

  從上面結構圖能夠看出系統跳轉的延時時間能夠用來請求新數據,大大提升了用戶體驗性。數組

  方案是有了,該怎麼實現呢。微信

  咱們知道mpvue的生命週期有onLoad mounted onShow 等。app

  咱們自建一個preLoad生命週期進行頁面預加載邏輯處理。函數

  是否是有個疑問,怎麼讓程序執行咱們的這個preLoad生命週期呢?

   講解一下vue的執行機制:

  

    mpvue建立每一個頁面都會有個main.js文件,執行了app = new Vue(app);在項目初始化時,都會先被執行,push到一個數組裏,這就是小程序頁面堆棧的原理了。

     原先的頁面跳轉,會執行這個App中的生命週期函數。找到一點靈感有沒有,咱們能夠在初始化時,對這個 App from './index' 的App對象進行全局儲存。在跳轉時同時對執行App中preLoad函數進行調用,而小程序正常執行App生命週期,

     當preLoad執行完後把數據傳給App return 中的這個對象,就實現了渲染更新。

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

  上代碼:

  兩個頁面,展現從joy-material 跳轉到home的過程

 

  global.js   

  

let $navs = {  //做用收集每一個頁面的實例App;
};
let $router =(path,className)=>{    //每一個頁面實例都會有個name字段,進行$navs匹配
setTimeout(()=>{
    wx.navigateTo({
      url:path
    });
  },150);
 $navs[className].preLoad();   //匹配到新頁面的實例,調用preLoad函數,不影響正常跳轉。
  
};
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");  //第二個參數是這個新頁面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>
相關文章
相關標籤/搜索