DDR爱好者之家

mpvue 页面预加载新增preLoad生命周期的两种方式
站长资源 2024/11/24 佚名
42 1538
DDR爱好者之家 Design By 杰米

存在的必要性：mpvue开发微信小程序，在页面跳转到新页面的过程中会有200ms左右的延迟，这个200ms如果用来请求新页面的接口，那么跳转到新页面或许已经渲染好了页面。

就是两种方式：

1.新页面跳转之前，就请求新页面数据。

2.跳转到新页面后，再请求数据，可能还会有一个loading的状态。

mpvue 页面预加载新增preLoad生命周期的两种方式

第二种方式是正常的的页面跳转，不say了。

这里讲解的都是第一种方式：

　　从上面结构图可以看出系统跳转的延时时间可以用来请求新数据，大大提高了用户体验性。

　　方案是有了，该怎么实现呢。

　　我们知道mpvue的生命周期有onLoad mounted onShow 等。

　　我们自建一个preLoad生命周期进行页面预加载逻辑处理。

　　是不是有个疑问，怎么让程序执行我们的这个preLoad生命周期呢？

　　　讲解一下vue的执行机制：

　mpvue 页面预加载新增preLoad生命周期的两种方式

　　　　mpvue创建每个页面都会有个main.js文件，执行了app = new Vue(app);在项目初始化时，都会先被执行，push到一个数组里，这就是小程序页面堆栈的原理了。

　　　　　原先的页面跳转，会执行这个App中的生命周期函数。找到一点灵感有没有，我们可以在初始化时，对这个 App from './index' 的App对象进行全局储存。在跳转时同时对执行App中preLoad函数进行调用，而小程序正常执行App生命周期，

　　　　　当preLoad执行完后把数据传给App return 中的这个对象，就实现了渲染更新。

export default{
 data(){
 return {} //把数据传到这个对象上
 }  
}

　 上代码：

mpvue 页面预加载新增preLoad生命周期的两种方式

　　两个页面，展示从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>

总结

以上所述是小编给大家介绍的mpvue 页面预加载新增preLoad生命周期的两种方式,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米