经过页面预加载（preload）提高小程序的响应速度

GitHub: https://github.com/WozHuang/mp-extend

主要目标

若是小程序在打开新页面时须要经过网络请求从接口中获取所用的数据，在请求完成以前页面都会由于没有数据而呈现一片空白，解决这个问题常见的解决方案有：

1. 先使用从缓存中取出上一次的数据，等到请求结束后再使用请求获得的数据（这个对于变更不大的数据是彻底可行的，可是对于变更大或者之内容为主的功能并不合适）

2. 在加载时显示骨架屏（知乎和饿了么的移动端有的地方是这么作的）

3. 前一个页面预加载下一个页面的数据，达到秒开的效果

很明显，缓存并不普遍适用，骨架屏只是一个比loading图标好看的占位符，而预加载可以彻底符合要求。

可是在小程序中若是要实现预加载的功能便须要在页面中操做其余页面（包括尚未建立实例的页面），会使代码严重耦合，不利于维护，须要一个更清晰的结构来实现预加载功能。

设计思路

1. 小程序中实现预加载能力的关键即是可以调用其余页面的函数，须要获取其余页面对象。可是部分页面尚未加载出来，getCurrentPages方法获取不到，所以须要把被预加载的页面的PageOption（就是在建立页面时传入Page函数的对象）给保存起来

2. 那些没有被建立的页面并无setData方法，须要模拟一个setData方法，把获取到的数据暂存起来，在onLoad阶段再调用 setData呈现到视图上

3. 页面应当能够主动被预加载，可是在没有被预加载的时候也应该可以正常打开

源码实现

preload源码依赖于mp-extend提供的全局混入能力。

1. 重写Page函数，保存须要预加载页面的PageOption

2. 扩展小程序页面的生命周期 onPreload，与onLoad功能功能基本相同，可以接收来自url的参数，在主动预加载时被调用

3. 提供 this.$preload(url) 方法，用于主动预加载某个页面，若是页面实例未建立就把预加载的数据保存起来，等到页面onLoad时再调用setData呈现到视图上

最终效果

参考资料

wxpage
微信小程序之提升应用速度小技巧