這篇文章主要介紹mpvue頁面預(yù)加載新增preLoad生命周期的方式有哪些，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司自2013年創(chuàng)立以來，先為溧水等服務(wù)建站，溧水等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為溧水企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

存在的必要性：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ù)，大大提高了用戶體驗(yàn)性。

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

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

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

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

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

　

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

　　　　　原先的頁面跳轉(zhuǎn)，會執(zhí)行這個App中的生命周期函數(shù)。找到一點(diǎn)靈感有沒有，我們可以在初始化時，對這個 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 中的這個對象，就實(shí)現(xiàn)了渲染更新。

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

　 上代碼：

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

　　global.js

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

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

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

$navs[className].preLoad(); //匹配到新頁面的實(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:"大蘋果"
  }
 },
 mounted(){
 },
 methods :{
  to(){
  pre.$router("/pages/home/main","home"); //第二個參數(shù)是這個新頁面name字段值,用來從$navs從匹配此實(shí)例。
  }
 }
 };
 pre.$navs[m.name] = m; //把實(shí)例存儲到全局$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ù)加載新增preLoad生命周期的方式有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：mpvue頁面預(yù)加載新增preLoad生命周期的方式有哪些-創(chuàng)新互聯(lián)
文章轉(zhuǎn)載：http://chinadenli.net/article34/hggpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、App設(shè)計(jì)、電子商務(wù)、搜索引擎優(yōu)化、靜態(tài)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)