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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
javascript 时间比较实现代码
Oct 28 Javascript
js Dialog 实践分享
Oct 22 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
JavaScript的六种继承方式(推荐)
Jun 26 Javascript
使用InstantClick.js让页面提前加载200ms
Sep 12 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
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/07/03 PHP
Destoon旺旺无法正常显示,点击提示“会员名不存在”的解决办法
2014/06/21 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
AngularJS中的JSONP实例解析
2016/12/01 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
Javascript幻灯片播放功能实现过程解析
2020/05/07 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
python编写俄罗斯方块
2020/03/13 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
《会变的花树叶》教学反思
2014/02/10 职场文书
母亲节感恩活动记录
2014/03/16 职场文书
教学改革实施方案
2014/03/31 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
火箭队口号
2014/06/18 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android
Redis唯一ID生成器的实现
2022/07/07 Redis