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

赞 (0)

相关推荐

  • mpvue将vue项目转换为小程序

    一. mpvue简介 mpvue:是由 美团点评团队出品的小程序开 发的一款基于 vue的框架, 从整个 Vue的核心代码上经过二次开发而形成的一个框架,相当于是给Vue本身赋能,增加了开发微信小程序的能力. 使用 mpvue开发小程序,你将在小程序技术体系的基础上获取到这样一些能力: l 彻底的组件化开发能力:提高代码 l 完整的 Vue.js 开发体验 l 方便的 Vuex 数据管理方案:方便构建复杂应用 l 快捷的 webpack 构建机制:自定义构建策略.开发阶段 hotReload l

  • 微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤

    本文介绍了微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤,分享给大家,具体如下: 微信小程序框架:mpvue ui框架:mpvue-weui request请求:fly.js 1.项目初始化 注:如果没有安装node环境的请先去网上下载node.js下来安装,安装后默认安装npm了 接下到你要建项目的目录下打开cmd窗口(快捷方法:打开到目录后按住键盘shift,然后点击鼠标右键选择在此处打开powershell窗口即可) npm默认从外网下载包,可能会比较慢,可以换

  • mpvue 单文件页面配置详解

    前言 mpvue 的出现把 vue 的开发体验带到了小程序这个平台中,但其目录结构与传统的 vue 项目却并不完全一致,一个典型的页面包含以下三个文件: index.vue // 页面文件 main.js // 打包入口,完成 vue 的实例化 main.json // 小程序特有的页面配置,早期写在 main.js 文件中 其中,每个页面的 main.js 文件基本都是一致的,可通过mpvue-entry来自动生成(weex 也有类似的处理),而 main.json 我个人认为直接在 vue

  • 详解mpvue小程序中怎么引入iconfont字体图标

    前言 iconfont阿里巴巴矢量图标库是我很喜欢的一个网站,可以下载/在线编辑/上传自己需要的矢量图标,也支持团队协作,那么在mpvue项目中如何引入呢? iconfont阿里巴巴矢量图标库 将图标加入购物车 搜索关键词可以是中文也可以是英文 下载素材 点击网站右上角的购物车图标,此处我们选第三个 ps:添加到项目很有用,可以在线编辑自己喜欢的图标大小样式/重命名/邀请成员等,此处我们选择加入项目并下载代码 文件解压 一般网页中为了兼容性考虑,我们会留下css/ttf/svg/woff/eot

  • mpvue跳转页面及注意事项

    mpvue跳转页面及注意事项

    下面先给大家介绍下mpvue跳转页面,具体内容如下所示: 正准备写一个小程序,得知了mpvue开源的消息,又恰巧之前刚刚学习了一点vue,便开始了我的mpvue学习之路. 第一步就是配置环境之类的...附上官网的quickstart    http://mpvue.com/mpvue/quickstart/ 相信看完官网的教程之后, 你的项目应该已经搭好了.下面说2个小问题的解决办法吧 1.编译总通不过,eslint限制太严格,关闭它吧(如果你是一个严谨的人,那就..吧) build文件夹---

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

    存在的必要性:mpvue开发微信小程序,在页面跳转到新页面的过程中会有200ms左右的延迟,这个200ms如果用来请求新页面的接口,那么跳转到新页面或许已经渲染好了页面. 就是两种方式: 1.新页面跳转之前,就请求新页面数据. 2.跳转到新页面后,再请求数据,可能还会有一个loading的状态. 第二种方式是正常的的页面跳转,不say了. 这里讲解的都是第一种方式: 从上面结构图可以看出系统跳转的延时时间可以用来请求新数据,大大提高了用户体验性. 方案是有了,该怎么实现呢. 我们知道mpvue的

  • html页面显示年月日时分秒和星期几的两种方式

    Js代码 复制代码 代码如下: //-----------------------------方式一--------------------------------------------- <html> <head> <script type="text/javascript"> function startTime(){ var today=new Date(); var strDate=(" "+today.getYear(

  • 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.

  • 理解Javascript图片预加载

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.

  • JavaScript资源预加载组件和滑屏组件的使用推荐

    资源预加载组件--preload 队列,可以支持队列加载和回调,也可以加载视频或者音频 进度条,可以动态获取进度条信息 支持img标签的预加载,添加pSrc属性即可 原生ES5 demo Install: git clone https://github.com/jayZOU/preload.git npm install npm run es6 访问http://localhost:8080/es6-demo Examples <audio pSrc="../public/audio/a

  • 实现图片预加载的三大方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.本文将分享三个不同的预加载技术,来增强网站的性能与可用性. 方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效.

  • 利用CSS、JavaScript及Ajax实现高效的图片预加载

    方法一:用CSS和JavaScript实现预加载 实现预加载图片有很多方法,包括使用CSS.JavaScript及两者的各种组合.这些技术可根据不同设计场景设计出相应的解决方案,十分高效. 单纯使用CSS,可容易.高效地预加载图片,代码如下: 复制代码 代码如下: #preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; } #preload-02 { background:

  • js中延迟加载和预加载的具体使用

    延迟加载(懒加载)和预加载是常用的 web 优化的手段.. 一.延迟加载(懒加载) 原理: 当在真正需要数据的时候,才真正执行数据加载操作. 目的: 延迟加载机制是为了避免一些无谓的性能开销而提出来的 实现延迟加载的几种方法 1. 让 js 最后加载 使用方法: 把 js 外部引入的文件放到页面底部 用途: 让 js 最后引入,从而加快页面加载速度 说明: 流览器之所以会采用同步模式,通常加载 js 文件或者放<script>标签都在结构最后面,也是因为它会阻止浏览器后续操作的原因,所以放在后

  • 使用InstantClick.js让页面提前加载200ms

    前言 加速网站加载的方式有很多,在@Roc的推荐下,我找到了这个InstantClick.js,仔细查看了官网的英文文档,发现InstantClick.js有个很好的实现思路(how-it-works). 在访问者点击一个链接之前( 鼠标测试:test yourself here): 悬停 hover (hover->click之间200ms左右) 鼠标按下 Mousedown (Mousedown->click之间100ms左右), Touchstart 手机触碰 这两个事件之间通常有200

  • JS图片预加载三种实现方法解析

    预加载基本概念:当页面打开图片提前加载,并且缓存在用户本地,需要用到时直接进行渲染:在浏览图片较多的网页(百度图库,淘宝京东等),可以有更好的用户体验: 一张图片的预加载 var img=new Image(); img.addEventListener("load",loadHandler); img.src="./img/1.jpg"; document.body.appendChild(img); console.log(img.width): functio

随机推荐