这篇文章给大家分享的是有关怎么让你的小程序健步如飞的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
通过这种技术,可以缩短用户的等待时间,极大地提升用户的使用体验。由于那篇文章并未给出实现方式,只是讲解了技术原理,因此本文就来为大家讲下技术实现方式。
框架优缺点
优点:
预加载下一个页面的数据,提高了页面的加载速度,轻量级的协议(200 ~ 300 ms左右就能接收到数据)能轻松让小程序页面打开后数据瞬间加载,几乎不出现空页面。
<李>让同种业务的代码保持在一个类中,不会破坏项目结构。
<李>代码量非常少,对原本业务影响非常少。
<李>实现预加载后想删掉预加载?只需在实现的类中删除一个字符串即可。
缺点:
需要你按情况替换setData为美元setData
<李>需要开发者非常清楚各情况下的上下文是什么。
<李>如果你的协议非常耗时,达到400 ms以上的,使用这种优化方式效果就不明显了。
<李>有网友发现,这个项目无法运行在使用了组件的小程序中,所以大家如果使用了组件的话,就不要直接用这个项目了。不过还是推荐你吸收下这个项目的思想,毕竟工程师在工作中思想是很重要的。
这里就不为大家展示最终效果了,感兴趣的朋友可以自行尝试下。
如何集成
重要声明:我的小程序是遵循ES6标准写的,里面用了类扩展及解构赋值等,如果看不懂的话,请学习下ES6 ! !如果你的项目是用的ES5,那就仔细阅读后续文章,体会预加载技术的核心思想,如果核心思想理解了,分分钟写一个出来,对吧~ ~
首先,你要有个基类CommonPage
小程序中的每一个页面类都继承该基类,这样的话才方便统一管理。
比如下面的IndexPage页面
IndexPage是第一个页面,不需要预加载,SecondPage是第二个页面,我们来模拟下SecondPage的预加载方式。
接下来看到的。()这个。把美元()()这个美元。解决()这个。拒绝美元()等带美元符号的都是基类中实现的方法。
1,给IndexPage页面添加跳转按钮。
注意:这里添加的班=皀ormal-style"hover-stay-time=?00“是非常重要的,如果不添加点击态,会很影响体验。
2,给IndexPage页面添加预加载专用跳转方式。
。美元的路线({路径、查询clazzName});这个方法的参数含义是:
路径:页面路径,支持绝对路径和相对路径。
<李>查询:需要传递的参数。这是一个对象类型的。
<李>clazzName:需要跳转的页面的类名。这个介绍SecondPage时再说。
其实你可能会问,既然有路径了,为什么还要clazzName ?这个问题会在介绍技术原理时详细说,那是下一篇的事儿了。
到这里,如果你也是用ES6的规范来实现类的,可以看到,在IndexPage中,你只需将跳转方式修改为这个。美元的路线({路径、查询clazzName});即可。
3,给SecondPage页面添加预加载专用的初始化方法。
