主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
序
之前看过一篇关于提高小程序应用速度的文章。文章主要讲述了如何实现小程序在触发页面跳转前的请求协议。获取数据并渲染到页面只需要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
评论前必须登录!
注册