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


Posted in Javascript onOctober 17, 2019

存在的必要性: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生命周期的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Javascript 构造函数,公有,私有特权和静态成员定义方法
Nov 30 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
JS工厂模式开发实践案例分析
Oct 17 #Javascript
小程序input数据双向绑定实现方法
Oct 17 #Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 #Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 #Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 #Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 #Javascript
浅谈Vue.set实际上是什么
Oct 17 #Javascript
You might like
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
PHP通过正则表达式下载图片到本地的实现代码
2011/09/19 PHP
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
php实现比较两个文件夹异同的方法
2015/06/18 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
js控制href内容的连接内容的变化示例
2014/04/30 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
Python的动态重新封装的教程
2015/04/11 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
浅谈Python2、Python3相对路径、绝对路径导入方法
2018/06/22 Python
Python:二维列表下标互换方式(矩阵转置)
2019/12/02 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
管理部部长岗位职责
2013/12/05 职场文书
本科生的职业生涯规划范文
2014/01/09 职场文书
迎接领导欢迎词
2014/01/11 职场文书
情人节活动总结范文
2015/02/05 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书
Python开发五子棋小游戏
2022/04/28 Python