怎么能让小程序速度大大提高?
发布时间:2022-07-09 14:52:10 所属栏目:经验 来源:互联网
导读:前言 以前看到过一篇关于提高小程序应用速度的文章,文章主要讲述了如何实现小程序在触发页面跳转前就请求协议,利用跳转页面的短短200~300ms的时间,获取到数据并渲染到页面上,实现数据在小程序页面中预加载。 框架优缺点 优点: 预加载下一个页面的数据,
前言 以前看到过一篇关于提高小程序应用速度的文章,文章主要讲述了如何实现小程序在触发页面跳转前就请求协议,利用跳转页面的短短200~300ms的时间,获取到数据并渲染到页面上,实现数据在小程序页面中预加载。 框架优缺点 优点: 预加载下一个页面的数据,提高了页面的加载速度,轻量级的协议(200~300ms左右就能接收到数据)能轻松让小程序页面打开后数据瞬间加载,几乎不出现空页面。 让同种业务的代码保持在一个类中,不会破坏项目结构。 代码量非常少,对原本业务影响非常少。 实现预加载后想删掉预加载?只需在实现的类中删除一个字符串即可。 缺点: 需要你按情况替换setData为$setData 需要开发者非常清楚各情况下的上下文是什么。 如果你的协议非常耗时,达到400ms以上的,使用这种优化方式效果就不明显了。 (免费学习视频分享:php视频教程) 如何集成 重要声明:我的小程序是遵循ES6标准写的,里面用了class extends及解构赋值等,如果看不懂的话,请学习下ES6!!如果你的项目是用的ES5,那就仔细阅读后续文章,体会预加载技术的核心思想,如果核心思想理解了,分分钟写一个出来,对吧 ~ ~ 首先,你要有个基类CommonPage 小程序中的每一个Page类都继承该基类,这样的话才方便统一管理。 比如下面的IndexPage页面 // pages/index/index.js import CommonPage from "../CommonPage"; class IndexPage extends CommonPage { constructor(...args) { super(...args); this.data = { 1、给IndexPage页面添加跳转按钮。 <!--index.wxml--> <view class="container"> <view bindtap="toSecondPage" hover-class="press-style" class="normal-style" hover-stay-time="100"> 闪电加载第二个页面</view> <view>300毫秒 闪电加载方式</view> </view> 注意:这里添加的class="normal-style" hover-stay-time="100"是非常重要的,如果不添加点击态,会很影响体验。 2、给IndexPage页面添加预加载专用跳转方式。 toSecondPage = function () { // this.$route是预加载的页面跳转方式,以wx.navigateTo方式跳转。这个方法是在CommonPage中实现的。 this.$route({path: '../second/second', query: {count: 10, title: '这是第二个页面'}, clazzName: 'SecondPage'}); // 这是小程序原生的普通加载方式 // wx.navigateTo({ // url: '../second/second?count=10&title=这是第二个页面' // }) } this.$route({path, query, clazzName});这个方法的参数含义是: path:页面路径,支持绝对路径和相对路径。 query:需要传递的参数。这是一个object类型的。 clazzName:需要跳转的页面的类名。这个介绍SecondPage时再说。 其实你可能会问,既然有path了,为什么还要clazzName?这个问题会在介绍技术原理时详细说,那是下一篇的事儿了。 到这里,如果你也是用ES6的规范来实现类的,可以看到,在IndexPage中,你只需将跳转方式修改为this.$route({path, query, clazzName});即可。 3、给SecondPage页面添加预加载专用的初始化方法。 // pages/second/second.js import CommonPage from "../CommonPage"; class SecondPage extends CommonPage { constructor(...args) { //super(...args)一定要写,他会将clazzName与下面的data进行合并。 super(...args); //这个$init(obj)中注入的obj就是页面初始时的data super.$init({ arr: [] //reject在协议失败时回调 //模拟网络请求 setTimeout(() => { if (typeof query.count === "string") { query.count = parseInt(query.count); } this.data.arr.splice(0, this.data.arr.length); for (let i = 0; i < query.count; i++) { this.data.arr.push({id: i, name: `第${i}个`, age: parseInt(Math.random() * 20 + i)}) } this.$setData(this.data); this.$resolve(this.data);//或者 resolve(this.data);只有调用了resolve或者reject方法,才能在this.$take()的then()方法中获取到值。 }, 300); }; onLoad(options) { const lightningData = this.$take('second-data'); if (lightningData) { lightningData.then((data) => { //成功回调,resolve(data)调用时触发 data就是resolve传递的参数 this.$setData(data); },(data, error)=>{ //失败回调,reject(data, error)调用时触发,data和error是reject传递的参数。 }); return; } this.initData(options); } } //这里注入的clazzName: 'SecondPage',与this.$route({path, query, clazzName});中的clazzName名称与其一致即可 Page(new SecondPage({clazzName: 'SecondPage'})); 大概是这么几步: 这个类需要在new时,将clazzName注入,this.$route({path, query, clazzName});中的clazzName名称与其一致即可。 在onLoad中使用this.$take(key).then(success,fail)来获取异步结果,分别对应了resolve和reject回调。如果你没有使用预加载,或者预加载失败,那么this.$take(key)方法返回空,由此可以判断是否使用了预加载进入页面! 这么做的话,实现了在跳转前先把下一个页面的协议发出去,而且还让同种业务的代码保持在一个类中,不会破坏项目结构! (编辑:PHP编程网 - 黄冈站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |