要理解微信小程序的页面刷新问题,首先需要理解页面的生命周期,所以以下两个页面必须多看几遍
页面生命周期
页面路由
关于页面生命周期,重点在于理解onLoad,onShow.
从以上的第一个链接文档可以看到,页面create后,依次执行onLoad,onShow,onReady,但onLoad和onReady每个页面生命周期只会触发一次，如果一个页面没有onUnload(也就是没有销毁并end了)，则不会再次触发onLoad和onReady.
onShow则不同,页面只要onHide后,再次进入就会触发onShow,并且请注意,如果Send Data,页面就会Rerender. 也就是说,我们如果能在onShow()里获取到改变后的数据,页面就会重新渲染(刷新).
在页面路由这个链接文档里,重点看"路由方式"那张表,如下图,wx.navigateTo到子页面后,父页面是onHide了,
当我们按左上角返回按钮,或者调用wx.navigateBack返回到父页面时,父页面调用了onShow()
理解了以上的内容,返回父页面并刷新的问题就很简单了.思路如下:
- 使用vuex或者数据缓存定义一个全局变量,比如wx.setStorageSync('isRerender','false')；
- 在父页面的onShow()钩子函数里检测这个变量,如果有变化,那么设置相关的初始状态后,则再次执行获取数据的的方法,并且设置wx.setStorageSync('isRerender','false')；
- 子页面如果修改了数据，那么就wx.setStorageSync('isRerender','true')。