在mpvue页面预加载中添加preLoad生命周期的两种方法

存在的必要性：mpvue开发微信小程序时，页面跳转到新页面会有200ms左右的延迟。如果使用这200毫秒来请求新页面的界面，则该页面可能是通过跳转到新页面而呈现的。

有两种方法：

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

2.跳转到新页面并请求数据后，可能会出现加载状态。

第二种方式是正常的页面跳转，并没有发言权。

第一种方式在这里解释：

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

有计划，怎么实现。

我们知道mpvue的生命周期包括装载在主机上的onLoad等等。

我们构建一个预加载生命周期来处理页面预加载逻辑。

有问题吗，如何让程序执行我们的preLoad生命周期？

解释vue的实现机制；

mpvue创建的每个页面都会有一个main.js文件，执行app=new Vue(app)；项目初始化时，会先执行，推入数组，这是applet页面栈的原理。

原页面跳转将执行本App中的生命周期功能。看看有没有灵感。我们可以从存储应用程序的应用程序对象。/index '在初始化期间全局。跳转时同时调用app中的preLoad函数，Applet正常执行App生命周期。

当预加载被执行并且数据在应用返回中被传输到这个对象时，渲染更新被实现。

export default { data(){ return { }//上的代码将数据传输到此对象}}:

两页展示了从快乐材料到家庭的跳跃过程

全球. js

让$navs={//收集实例App每页的；};让$ router=(路径，类名)={//每个页面实例将有一个名称字段，并将执行$navs匹配。SetTimeout (()={wx。navigateto({ URL : path })；},150);$ navs[类名]。preLoad()；//如果匹配新页面的实例，调用preLoad函数，不影响正常跳转。};导出默认值{ $ navs: $ navs，$ router : $ router }；joy-材料索引. 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 3360 ' big apple ' }，mounted () {}，methods : {to () {pre。$ router ('/pages/home/main '，' home ')//第二个参数是这个新页面的名称字段值，用于匹配$navs中的这个实例。} } };pre。$ navs[m . name]=m；//将实例存储在全局$ navs中；导出默认m；/scriptstyle作用域lang='scss'/stylehome 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=' PPP '；} };pre。$ navs[h . name]=h；导出默认值h；/scriptstyle作用域/样式摘要

以上是在边肖介绍的mpvue页面预加载新的预加载生命周期的两种方法。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！