问题概述
公司做的活动项目还是在老系统上开发，也就是多页面以及php模板渲染，然后放到公众号上，于是
1.会发现在IOS，上比如是地址列表页数据是ajax请求的，跳转地址详情修改地址保存后，返回上一页-地址列表发现，地址列表上的数据没有变。
2.在andorid上，比如活动页，模板渲染出来的页面最初有10次抽奖机会，我使用了两次之后，把抽奖次数用JS改为8,但是跳转其它页面再返回的时候，android上面显示的是抽奖次数依然是10，IOS的抽奖次数是8。
手动刷新，都能改变以上两个问题。但这不是我们想要的，对用户来说有一定的误导性。
发生原因
微信浏览器中，返回上一页，IOS默认是不进行页面刷新的，android会刷新，所以会出现问题概述1中，因为IOS不刷新，所以修改地址详情后，返回地址列表之后并没有刷新地址列表页的数据。
这个特性机制使得IOS在问题2的时候好像没有发生数据显示问题，因为它没有刷新，但是android刷新了，数据竟然是错的是什么鬼。
是android中webview的缓存原因，页面是刷新了，但是并没有重新去后台请求php渲染的页面，而是去缓存中寻找之前php渲染的页面，所以刚开始时抽奖次数是10，现在还是取那个页面。
解决方案
如果是使用Vue、React和Angular单页应用，直接使用Redux等状态管理器直接解决就好。
如果跟我是老系统多页应用。
但是只需要应用在类似需求的页面上，并不是所有页面
解决IOS返回上一页不刷新
1.第一种方法
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
2.第二种方法
var isPageHide = fasle;
window.addEventListener('pageshow', function () {
alert(isPageHide)
if (isPageHide) {
window.location.reload();
}
});
window.addEventListener('pagehide', function () {
isPageHide = true;
});
3.第三种办法
window.addEventListener('pageshow', function(e) {
// 通过persisted属性判断是否存在 BF Cache
alert(e.persisted)
if (e.persisted) {
location.reload();
}
});
解决php渲染的模板缓存问题
1.设置一个input保存php渲染时间戳
<input id="timeCalc" value="时间"/>
2.每次页面刷新页面，对比input里的时间戳，如果不一样执行
window.location.reload()
最终
不知道还有没有其他解决方案，期待告知。
网友评论