存在的必要性: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>