如何让你的小程序像苍蝇一样走路(微信像小程序一样走路)

序

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

通过这项技术，可以缩短用户的等待时间，大大提升用户体验。由于那篇文章没有给出实现方法，只是说明了技术原理，所以这篇文章就给大家讲讲技术实现方法。

框架的优点和缺点

优势:

预加载下一页的数据，提高了页面的加载速度。轻量级协议(200~300ms左右即可接收数据)可以轻松实现小程序页面打开后瞬间加载数据，几乎不会出现空页面。

将同一业务的代码放在一个类中不会破坏项目结构。

代码量很小，对原有业务影响不大。

实现后要删除预载吗？只需在实现的类中删除一个字符串。

缺点:

您需要根据需要用$setData替换setData。

开发人员需要非常清楚每种情况下的上下文。

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

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

这里就不展示最终效果了。有兴趣的朋友可以自己尝试一下。

(免费学习视频分享:php视频教程)

如何整合

重要提示:我的小程序是按照ES6标准编写的，使用了类扩展和解构赋值等。如果看不懂，请学习ES6！！如果你的项目使用的是ES5，那么仔细阅读后续文章，体会预压技术的核心思想。如果你理解了核心思想，分分钟写一个吧~ ~

首先你要有一个基类CommonPage。

小程序中的每个页面类都继承了基类，便于统一管理。

例如，下面的IndexPage页面

//pages/index/index . js从 ../common page ；；类IndexPage扩展了CommonPage {构造函数(...args) { super(...args)；this . data = { testStr: # 39；这是第一页 # 39；} } onLoad(options){ } } Page(new index Page())；IndexPage是第一页，不需要预加载，SecondPage是第二页。让我们来模拟下一个第二页的预加载方法。

下面这个。$ route () this。$ put () this。$ take()这个。$ resolve () this。$ reject()和其他带有$ symbol的方法都是在基类中实现的方法。

1.向IndexPage页面添加跳转按钮。

lt！--index.wxml--> ltview class = 容器 gt lt视图bindtap = toSecondPage hover -class = ；按-style ；class = 正常-样式 hover -stay -time = ；100 gt闪电载入第二页

2.为IndexPage页面添加特殊的预加载跳转模式。

Tosecondpage = function () {//this。$ route是预加载的页面跳转模式，在wx.navigateTo模式下跳转。这个方法是在CommonPage中实现的。这个。$ route({ path: # 39；../秒/秒 # 39；，查询:{计数:10，标题: # 39；这是第二页 # 39；}，clazz name: # 39；第二页 # 39；});//这是小程序的原生普通加载方法//wx . navigate to({//URL: # 39；../秒/秒？计数= 10 Title=这是第二页 # 39；//})}这个。$route({path，query，clazz name })；该方法的参数意味着:

Path:页面路径，支持绝对路径和相对路径。

查询:需要传递的参数。这是一个对象类型。

ClazzName:需要跳转的页面的类名。等介绍完这第二页再说吧。

其实你可能会问，既然有path，为什么还要clazzName？这个问题在介绍技术原理的时候会详细说明，这是接下来的事情。

在这里，如果你也使用ES6的规范来实现类，你可以看到在IndexPage中，你只需要将跳转模式修改为这个。$ route ({path，query，clazz name })；去做吧。

3.添加一个特殊的初始化方法，用于预加载到第二页页面。

//pages/second/second . js从 ../common page ；；类第二页扩展公共页{构造函数(...args) {//super(...args)必须写，他会把clazzName和下面的数据合并。超级(...args)；//这个$init(obj)中注入的obj就是数据超。$init({ arr: []})位于页面的开头；} $onNavigator(query) {//这里的查询是由此传递的queryconsole.log。$ route( # 39；闪电加载期间收到的参数 # 39；，查询)；这个。$ put( # 39；秒-数据 # 39；，this.initData.bind(this)，query)；};Initdata = function (query，resolve，reject){//这里的查询是在this中传递的。$put()。//当协议成功时解析回调。//协议失败时拒绝回拨。//模拟网络请求settimeout(()= >；{ if(type of query . count = = = ；字符串 ){ query . count = parse int(query . count)；} this.data.arr.splice(0，this . data . arr . length)；for(设I = 0；我 ltquery.count++) {this.data.arr.push ({id: i，name:` the $ { I } th `, age:parse int(math . random()* 2主机参考I)} } this。$ setdata(this . data)；这个。$ resolve(this . data)；//或者resolve(this . data)；您只能在此的then()方法中获取值。如果调用resolve或reject方法，则为$take()。}, 300);};onLoad(options){ const lightning data = this。$ take( # 39；second -数据 # 39；);if(lightning data){ lightning data . then((data)= gt；{//回调成功，调用resolve(data)时触发的数据是参数this。由resolve传递的$setData(data );}，(数据，错误)= gt{//失败回调，调用reject(data，error)时触发。数据和错误是拒绝传递的参数。});返回；} this.initData(选项)；} }//此处注入的Clazz名称: # 39；第二页 # 39；，还有这个。$ route ({path，query，clazz name })；clazzName在中的名称可以是page(new second page({ clazz name: # 39；第二页 # 39；}));大概有几个步骤:

这个类需要注入clazzName到这个里面。$ route ({path，query，clazzname})当它是新的时；中的clazzName名称与之一致。

你需要在SecondPage中注入一个新的生命周期函数，也就是预加载方法。执行这个的时候。$route，您在此传递的别名是什么。$route？这个框架会自动找到匹配的类，并调用该类的$onNavigator方法。

这个的参数。$onNavigator中调用的$put(key，fun，query)分别是key、异步请求方法和异步请求方法的参数。

将this.setData替换为this。$setData()并使用它。$resolve(数据)或this。$reject(data，error)回调成功或失败。

用这个。$ take(键)。然后(success，fail)在onLoad中获得异步结果，分别对应解析和拒绝回调。如果不使用预加载，或者预加载失败，那么这个。$take(key)方法返回null，可以判断你是否使用preload进入页面！

这样做可以在跳转之前把下一页的协议发出去，同一业务的代码可以放在一个类里，不会破坏项目结构！

预加载后，如果不想用预加载，只需要删除新SecondPage()中注入的clazzName就可以了！

推荐:小程序开发教程以上是如何让你的小程序飞得很快的详细内容。更多请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

本文由主机参考刊发，转载请注明：如何让你的小程序像苍蝇一样走路(微信像小程序一样走路) https://zhujicankao.com/79458.html