小程序如何实现跨页面交互

这篇文章主要介绍小程序如何实现跨页面交互,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

去年年末,微信小程序的分包大小已经到达了12米大小,一方面说明小程序的确逐步为开发者放开更大的权限,另一方面也说明了对于某些小程序8米的大小已经不够用了。我个人今年也是在开发一个B小程序应用。这里列举一些跨页面交互的场景。

对于B端应用的业务需求来说,小程序开发的复杂度相对比网页开发要复杂一些。一个是双线程的处理机制问题,另一个是页面栈之间交互问题。

注:笔者目前只需要开发微信小程序,为了在小程序页面中可以使用属性行为观察员等新功能,已经使用组件构造器来构造页面。具体可以参考微信小程序分量构造器。如果你也没有多端开发的需求,建议尝试使用,可以得到不错的体验。

<>强性能优化类

<人力资源/>

对于小程序在页面中点击触发wx。navigateTo跳转其他页面,中间会有一段时间的空白加载期(对于分包出去的页面,空白期则会更长),但是这是小程序内部机制,没有办法进行优化。我们只能眼睁睁的等待这段没有意思的空白期过去。

当考虑到跳转页面后的第一件事情便是取数逻辑,那么我们是否能够进行优化呢?答案是肯定的。我们没有办法直接在当前页面取得数据之后再进行跳转操作(这样操作更不好),但是我们却可以利用缓存当前的请求,详情可以参考我之前的博客文章,承诺对象3种妙用。

代码如下:

const  promiseCache =, new 地图() 　　 　　export  function  setCachePromise(关键,承诺),{ 　　promiseCache.set才能(关键,承诺) 　　} 　　 　　export  function  getCachePromise(关键),{//才能,根据关键获取当前的数据,, 　　const 才能;promise =, promiseCache.get(关键)//,才能用完删除,目前只做中转用途,也可以添加其他用途 　　promiseCache.delete才能(关键) 　　promise  return 才能; 　　}

做一份全局的地图,然后利用地图缓存承诺对象,在跳转之前代码为:

//,导入,setCachePromise 函数 　　 　　组件({ 　　方法:才能,{ 　　,,,getBookData (id), { 　　,,,,,const  promise =,//, promise 请求 　　,,,,,,,setCachePromise (“xxx: $ {id}”,承诺),,,,,, 　　,,,},,, 　　,,,handleBookDetailShow (e), { 　　,,,,,const  id =e.detail 　　,,,,,this.getBookData (id) 　　,,,,,,wx.navigateTo ({url:,“xx和xx/x ? id=$ {id} '}) 　　,,,} 　　,,} 　　})

而跳转之后的代码也如下所示:

//,导入,getCachePromise 函数 　　 　　组件({ 　　,,,属性:,{ 　　,,,,,,,Number , 　　,,,}, 　　,,,一生:,{ 　　,,,,,attached  (), { 　　,,,,,,,const  id =, this.data.id , 　　,,,,,,,//,取得全局缓存的承诺 　　,,,,,,,const  bookPromise =, getCachePromise (“xxx: $ {id}”) 　　,,,,,,,bookPromise.then ((res),=祝辞,{ 　　,,,,,,,,,//,业务处理 　　,,,,,,,}).catch (error =祝辞,{ 　　,,,,,,,,,//,错误处理,, 　　,,,,,,,}) 　　,,,,,} 　　,,,}, 　　,,,方法:,{ 　　,,,,,getBook (), { 　　,,,,,,,//,获取数据,以便于,错误处理,上拉刷新,等操作,, 　　,,,,,},, 　　,,,} 　　})

如此便可以同时处理取数和页面加载的逻辑,当然,这个对于页面有耦合性,不利于后续的删除与修改。但考虑如果仅仅加在分包跳转之间可能会有不错的效果。

想要无侵入式,可以进一步学习研究微信小程序之提高应用速度小技巧以及wxpage框架,同时考虑到无论是ToC还是ToC用户,都有可能存在硬件以及网络环境等问题,该优化还是非常值得的。

当然微信小程序为了减少冷启动时间,提供了周期性更新数据预拉取功能。

注:上面的promiseCache只作为中转的用途,不作为缓存的用途,如果你考虑添加缓存,可以参考我之前的博客文章,前端api请求缓存方案。

<强>通知类

<人力资源/>

如果是pc端中进行交互,对于数据的CRUD。例如在详情页面进行了数据的修改和删除,返回列表时候就直接调取之前存储的列表查询条件再次查询即可,而对于移动端这种下拉滚动的设计,就没有办法直接调用之前的查询条件来进行搜索。

如果从列表页面进入详情页面后,在详情页面只会进行添加或者修改操作,然后返回列表页面。此时可以提示用户数据已经进行了修改,请用户自行决定是否进行刷新操作。

小程序如何实现跨页面交互