如何让你的小程序健步如飞

如何让你的小程序健步如飞
以前看到过一篇关于提高小程序应用速度的文章，文章主要讲述了如何实现小程序在触发页面跳转前就请求协议，利用跳转页面的短短200~300ms的时间，获取到数据并渲染到页面上，实现数据在小程序页面中预加载。

前言

以前看到过一篇关于提高小程序应用速度的文章，文章主要讲述了如何实现小程序在触发页面跳转前就请求协议，利用跳转页面的短短200~300ms的时间，获取到数据并渲染到页面上，实现数据在小程序页面中预加载。

通过这种技术，可以缩短用户的等待时间，极大地提升用户的使用体验。由于那篇文章并未给出实现方式，只是讲解了技术原理，因此本文就来为大家讲下技术实现方式。

框架优缺点

优点：

预加载下一个页面的数据，提高了页面的加载速度，轻量级的协议（200~300ms左右就能接收到数据）能轻松让小程序页面打开后数据瞬间加载，几乎不出现空页面。

让同种业务的代码保持在一个类中，不会破坏项目结构。

代码量非常少，对原本业务影响非常少。

实现预加载后想删掉预加载？只需在实现的类中删除一个字符串即可。

缺点：

需要你按情况替换setData为$setData

需要开发者非常清楚各情况下的上下文是什么。

如果你的协议非常耗时，达到400ms以上的，使用这种优化方式效果就不明显了。

有网友发现，这个项目无法运行在使用了组件的小程序中，所以大家如果使用了组件的话，就不要直接用这个项目 了。不过还是推荐你吸收下这个项目的思想，毕竟工程师在工作中思想是很重要的。

这里就不为大家展示最终效果了，感兴趣的朋友可以自行尝试下。

（免费学习视频分享：php视频教程）

如何集成

重要声明：我的小程序是遵循ES6标准写的，里面用了class extends及解构赋值等，如果看不懂的话，请学习下ES6！！如果你的项目是用的ES5，那就仔细阅读后续文章，体会预加载技术的核心思想，如果核心思想理解了，分分钟写一个出来，对吧 ~ ~

首先，你要有个基类CommonPage

小程序中的每一个Page类都继承该基类，这样的话才方便统一管理。

比如下面的IndexPage页面

// pages/index/index.jsimport CommonPage from "../CommonPage";class IndexPage extends CommonPage { constructor(...args) { super(...args); this.data = { testStr: 'this is the firstPage' } } onLoad(options) { }}Page(new IndexPage());