时间:2021-05-26
存在的必要性: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
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生命周期的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
H5的两种存储技术的最大区别就是生命周期。1.localStorage是本地存储,存储期限不限;2.sessionStorage会话存储,页面关闭数据就会丢失。
本文为大家分享了servlet生命周期的相关资料,供大家参考,具体内容如下1.Servlet生命周期:Servlet加载--->实例化--->服务--->销毁。
本文实例讲述了React生命周期原理与用法。分享给大家供大家参考,具体如下:React生命周期生命周期概览生命周期的状态组件的生命周期可分成三个状态:Mount
1.生命周期1.onLoad():页面加载时触发,一个页面只加载一次。2.onShow():页面显示切换的时候触发3.onReady():页面初次渲染完成时触发
jsp生命周期理解JSP底层功能的关键就是去理解它们所遵守的生命周期。JSP生命周期就是从创建到销毁的整个过程,类似于servlet生命周期,区别在于JSP生命