促使你的小程序运行快速的方法有哪些

前言

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

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

框架优缺点

优点：

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

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

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

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

缺点：

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

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

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

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

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

如何集成

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

首先，你要有个基类CommonPage

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

比如下面的IndexPage页面

IndexPage是第一个页面，不需要预加载，SecondPage是第二个页面，我们来模拟下SecondPage的预加载方式。

接下来看到的this.$route() this.$put() this.$take() this.$resolve() this.$reject()等带$符号的都是基类中实现的方法。

1、给IndexPage页面添加跳转按钮。

注意：这里添加的class="normal-style" hover-stay-time="100"是非常重要的，如果不添加点击态，会很影响体验。

2、给IndexPage页面添加预加载专用跳转方式。

this.$route({path, query, clazzName});这个方法的参数含义是：

• path：页面路径，支持绝对路径和相对路径。

• query：需要传递的参数。这是一个object类型的。

• clazzName：需要跳转的页面的类名。这个介绍SecondPage时再说。

其实你可能会问，既然有path了，为什么还要clazzName？这个问题会在介绍技术原理时详细说，那是下一篇的事儿了。

到这里，如果你也是用ES6的规范来实现类的，可以看到，在IndexPage中，你只需将跳转方式修改为this.$route({path, query, clazzName});即可。

3、给SecondPage页面添加预加载专用的初始化方法。

大概是这么几步：

• 这个类需要在new时，将clazzName注入，this.$route({path, query, clazzName});中的clazzName名称与其一致即可。

• 需要在SecondPage中注入新的生命周期函数，也就是预加载方法。在执行this.$route时，你在this.$route中传递的clazzName是什么，这个框架就会自动去找匹配一致的类，调用该类的$onNavigator方法。

• 在$onNavigator中调用this.$put(key,fun,query)参数分别是键、异步请求方法、异步请求方法的参数。

• 在异步请求方法将this.setData替换为this.$setData()，使用this.$resolve(data)或者this.$reject(data,error)来回调成功或失败。

• 在onLoad中使用this.$take(key).then(success,fail)来获取异步结果，分别对应了resolve和reject回调。如果你没有使用预加载，或者预加载失败，那么this.$take(key)方法返回空，由此可以判断是否使用了预加载进入页面！

这么做的话，实现了在跳转前先把下一个页面的协议发出去，而且还让同种业务的代码保持在一个类中，不会破坏项目结构!

在实现了预加载后，如果不想用预加载了，只需要删掉new SecondPage()时注入的clazzName即可！

以上就是促使你的小程序运行快速的方法有哪些的详细内容！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。