mpvue 页面预加载新增preLoad生命周期的两种方式
存在的必要性mpvue开发微信小程序,在页面跳转到新页面的过程中会有200ms左右的延迟,这个200ms如果用来请求新页面的接口,那么跳转到新页面或许已经渲染好了页面。
就是两种方式
1.新页面跳转之前,就请求新页面数据。
2.跳转到新页面后,再请求数据,可能还会有一个loading的状态。
第二种方式是正常的的页面跳转,不say了。
这里讲解的都是第一种方式
从上面结构图可以看出系统跳转的延时时间可以用来请求新数据,大大提高了用户体验性。
方案是有了,该怎么实现呢。
我们知道mpvue的生命周期有onLoad mounted onShow
等。
我们自建一个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>
以上所述是长沙网络推广给大家介绍的mpvue 页面预加载新增preLoad生命周期的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
如果你觉得本文对你有帮助,欢迎网络推广网站推广转载,烦请注明出处,谢谢!
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程