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

 更新时间:2019年10月17日 10:25:58   作者:changYao  
这篇文章主要介绍了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生命周期的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • 实例浅析js的this

    实例浅析js的this

    本文通过做几个简单的对照实验,根据这几个对照实验的结果,帮助大家理解js的this用法。下面就跟小编一起来看看吧
    2016-12-12
  • 详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】

    详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】

    本篇文章主要介绍了JavaScript的延迟对象、跨域、模板引擎、弹出层、AJAX,对其进行示例解析,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • ajax如何实现页面局部跳转与结果返回

    ajax如何实现页面局部跳转与结果返回

    AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,本篇文章给大家介绍ajax如何实现页面局部跳转与结果返回,感兴趣的朋友一起来学习
    2015-08-08
  • Js实现京东无延迟菜单效果实例(demo)

    Js实现京东无延迟菜单效果实例(demo)

    本篇文章主要介绍了Js实现京东无延迟菜单效果实例(demo) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • JavaScript的removeChild()函数用法详解

    JavaScript的removeChild()函数用法详解

    removechild 函数可以删除父元素的指定子元素,通过本文给大家介绍javascript的removeChild()函数用法,对js removechild函数相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • JS随机排序数组实现方法分析

    JS随机排序数组实现方法分析

    这篇文章主要介绍了JS随机排序数组实现方法,结合具体实例形式对比分析了javascript针对数组进行随机排序的相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • 详解如何使用Flutter动画魔法使UI元素活起来

    详解如何使用Flutter动画魔法使UI元素活起来

    这篇文章主要为大家介绍了如何使用Flutter动画魔法使UI元素活起来方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 微信小程序h5页面跳转小程序的超详细讲解

    微信小程序h5页面跳转小程序的超详细讲解

    开发中涉及到一个需求,就是从一个预约票购买的页面需要跳转到 小程序,下面这篇文章主要给大家介绍了关于微信小程序h5页面跳转小程序的超详细讲解,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • javascript实现数独解法

    javascript实现数独解法

    数独(すうどく,Sūdoku)是一种运用纸、笔进行演算的逻辑游戏。玩家需要根据9×9盘面上的已知数字,推理出所有剩余空格的数字,并满足每一行、每一列、每一个粗线宫内的数字均含1-9,不重复。
    2015-03-03
  • 详解JavaScript 中的批处理和缓存

    详解JavaScript 中的批处理和缓存

    这篇文章主要介绍了详解JavaScript 中的批处理和缓存,帮助大家完成需求,更好的理解和使用JavaScript,感兴趣的朋友可以了解下
    2020-11-11

最新评论