本文是小程序调优解决方案之从详情返回列表局部刷新数据。
细节往往要多耗很多时间和精力,但却能提高性能并带来更好的体验感,就像之前的分页出现重复数据这个本来是个偶然事件,而这个小小的改善却要大动干戈,要改动小程序端、后端逻辑还有数据库端SQL。
本文的场景是这样的,像博文、游记等的文章列表都有显示浏览数、评论数、点赞数等数据,而这些数据在打开具体文章后会发生改变,返回列表就应该改变对应的数据,懒人的做法是直接重新查询列表数据,这样可以达到刷新数据的目的,但这样是整个页面刷新,首先要去调用接口查询数据加大了后台接口负担性能就不好了,而整个页面刷新分页又从头开始如果这时翻到N页重新加载后根本就看不到那条数据更不用谈用户体验了。
既然返回列表用重新查询列表来更新数据的方法这么不好,有没有更优的方案呢?办法总比困难多。只要在返回列表之前把改动的数据传过去然后加载列表的时候重新渲染数据即可。但回传数据又遇到问题了,因为返回并不像跳转页面可以指定路由,也就是无法直接(明)指定回传参数了,那不是玩完了吗?没错办法总比困难多,这时突然想到了setStorage,既然明的行不通我们就使用暗的方法,即把参数在返回列表前先存到本地缓存中,然后加载列表的时候重新渲染数据即可。
这里使用页面生命周期函数的onUnload监听页面卸载之前setStorage数据。
然后在onShow监听页面显示的时候用getStorage获取数据并遍历修改对应的数据它就会重新渲染数据了。
当然记得removeStorage,毕竟微信小程序单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
需要注意的是,像on开头的生命周期事件只在独立页面有效,像作为公共模块引用是不走这些函数的,公共模块支持methods、mounted等,更多知识点、技巧、注意事项请访问我之前写的小程序开发[零碎知识点、技巧、注意事项等整理],另外要注意setStorage的key命名要避免因重复而覆盖数据,同时也要把控好缓存的大小、同异步、异常处理、用户清缓存影响等问题。
总结:本文巧妙利用setStorage来传参数,回显的时候用getStorage获取数据并遍历修改对应的数据,从而达到局部刷新列表数据的效果,最后用removeStorage释放并回收资源。
展开阅读全文