【移动应用开发技术】怎么让你的小程序健步如飞

【移动应用开发技术】怎么让你的小程序健步如飞

这篇文章给大家分享的是有关怎么让你的小程序健步如飞的内容。在下觉得挺实用的，因此分享给大家做个参考，一起跟随在下过来看看吧。通过这种技术，可以缩短用户的等待时间，极大地提升用户的使用体验。由于那篇文章并未给出实现方式，只是讲解了技术原理，因此本文就来为大家讲下技术实现方式。框架优缺点优点：预加载下一个页面的数据，提高了页面的加载速度，轻量级的协议（200~300ms左右就能接收到数据）能轻松让小程序页面打开后数据瞬间加载，几乎不出现空页面。让同种业务的代码保持在一个类中，不会破坏项目结构。代码量非常少，对原本业务影响非常少。实现预加载后想删掉预加载？只需在实现的类中删除一个字符串即可。缺点：需要你按情况替换setData为$setData需要开发者非常清楚各情况下的上下文是什么。如果你的协议非常耗时，达到400ms以上的，使用这种优化方式效果就不明显了。有网友发现，这个项目无法运行在使用了组件的小程序中，所以大家如果使用了组件的话，就不要直接用这个项目了。不过还是推荐你吸收下这个项目的思想，毕竟工程师在工作中思想是很重要的。这里就不为大家展示最终效果了，感兴趣的朋友可以自行尝试下。如何集成重要声明：我的小程序是遵循ES6标准写的，里面用了classextends及解构赋值等，如果看不懂的话，请学习下ES6！！如果你的项目是用的ES5，那就仔细阅读后续文章，体会预加载技术的核心思想，如果核心思想理解了，分分钟写一个出来，对吧~~首先，你要有个基类CommonPage小程序中的每一个Page类都继承该基类，这样的话才方便统一管理。比如下面的IndexPage页面//

pages/index/index.js

import

CommonPage

from

"../CommonPage";

class

IndexPage

extends

CommonPage

{

constructor(...args)

{

super(...args);

this.data

=

{

testStr:

'this

is

the

firstPage'

}

}

onLoad(options)

{

}

}

Page(new

IndexPage());IndexPage是第一个页面，不需要预加载，SecondPage是第二个页面，我们来模拟下SecondPage的预加载方式。接下来看到的this.$route()this.$put()this.$take()this.$resolve()this.$reject()等带$符号的都是基类中实现的方法。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:

[]

});

}

$onNavigator(query)

{

//这里的query是从this.$route中传递来的query

console.log('闪电️加载时接收到的参数',

query);

this.$put('second-data',

this.initData.bind(this),

query);

};

initData

=

function

(query,

resolve,

reject)

{

//这里的query是在this.$put()中传递过来的

//resolve在协议成功时回调

//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名称与其一致即可。需要在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(ke