01.17 利用getCurrentPagesAPI对小程序进行性能优化

最近在开发一个商城小程序,其中在编写商品结算的时候需要实现一个小需求:

点击收货地址进入收货地址列表页更换收货地址;这是一个很常见的功能。但是从用户体验方面考虑,我想实现的是用户在小程序的收货地址列表页中选择完收货地址之后,就可以把数据直接赋值给小程序的上级结算页面,这样就可以实现页面无加载。提高用户在小程序中的体验!

小程序性能优化之后效果的图展示:

利用getCurrentPagesAPI对小程序进行性能优化

这个功能主要是运用小程序的getCurrentPagesAPI进行跨页面赋值实现的,下面就开始介绍小程序的getCurrentPagesAPI!

什么是 getCurrentPages

小程序的getCurrentPagesAPI用于获取页面栈的实例列表,以数组的形式按栈的顺序给出,返回的数组中的第一个元素为小程序首页的页面栈实例,最后一个元素为小程序当前页面当前页面的页面栈实例。

利用getCurrentPagesAPI对小程序进行性能优化

注意事项:

1、不要尝试修改页面栈,会导致路由以及页面状态错误。

2、不要在小程序App.onLaunch的时候调用 getCurrentPages(),因为此时页面还没有生成。

getCurrentPagesAPI用处

一般我们可以用 getCurrentPages()[getCurrentPages().length - 1] 来获取小程序当前页面栈的实例。

小程序中的每一个页面栈的实例都保存着对应页面上的属性以及方法。拿到页面栈我们就可以获取到对应页面上的属性及方法,做到跨页面赋值、跨页面调用函数API。

利用getCurrentPagesAPI对小程序进行性能优化

其中我们可以利用页面栈的route, options属性实现一个推广常见小需求;需求分析:假设我们的小程序是一个需要注册才可以使用的小程序。a 将 小程序的某个页面推广给 b ,b 打开小程序由于没有注册会自动跳转到小程序的注册页,待 b 注册成功之后我们可以通过获取 a 推广给 b 的页面的页面栈实现返回之前小程序的推广页面!

利用getCurrentPagesAPI对小程序进行性能优化

使用 getCurrentPagesAPI来实现修改收货地址无延迟

现在开始讲解文章开头提到的使用小程序的getCurrentPagesAPI来实现流畅修改收货地址这个小功能!

其实这一块主要包含两个方面:

第一个是当用户没有任何收货地址时,我们不应该跳转到小程序的收货地址列表页(因为收货地址列表为空),而是应该跳转到小程序的添加收货地址页面。然后再用户成功添加收货地址之后根据小程序的上级页面栈是否为结算页面来做出相应的处理。此处我的处理为将刚添加的收货地址信息赋值给上级结算页面栈中的收货地址详情,然后通过小程序的路由跳转API来返回上级页面。

利用getCurrentPagesAPI对小程序进行性能优化

第二种就是在用户有多个收货地址之后,在小程序的收货地址列表页中选择更换收货地址,这种实现起来也很简单,就是当用户点击某个收货地址之后,我们拿到对应的收货地址详情,然后再获取结算页面栈的收货地址属性,之后将用户在点击页面拿到的收货地址详情数据赋值给结算页面的收货地址详情。

利用getCurrentPagesAPI对小程序进行性能优化

总结

getCurrentPages这个API还是挺好用的,总结一个,大致在这几个业务场景需要使用getCurrentPagesAPI。

1、需要获取小程序页面栈的长度。

2、需要实现跨页面赋值。

3、页面跳转之后需要再次执行生命周期onLoad()方法等。

4、需要获取小程序当前页面栈或其它页面栈数据。


分享到:


相關文章: