在最近的威胁H5项目中,返回上一步页面不会自动刷新,在网上找到了解决方案:
判断是IOS还是Android系统。
function isIos() {//判断是IOS还是Android
var userAgent = navigator.userAgent;
var isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1; //android终端
var isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
return false;
} else if (isiOS) {
return true;
}
}
if (isIos) {
let isPageHide = false
window.addEventListener('pageshow', function () {
if (isPageHide) {
window.location.reload()
}
})
window.addEventListener('pagehide', function () {
isPageHide = true
})
} else {
const needRefresh = sessionStorage.getItem('need-refresh')
if (needRefresh) {
sessionStorage.removeItem('need-refresh')
window.location.reload()
}
}
转自: 解决方案:公众号h5页面开发时微信自带返回按钮,不刷新问题
但是项目中采用的是Nuxt服务端渲染框架,所以得加几步:
- 在plugins文件中添加weixin.js文件,将以上代码放上
- 在nuxt.config.js文件中plugins配置中将此插件添加即可
weixin.js代码:(deviceType,运行设备及环境请参考)
export default ({ app, store, $axios }) => {
if (store.getters.deviceType.env && store.getters.deviceType.env === 'wechat') {
if (store.getters.deviceType.type === 'ios') {
let isPageHide = false
window.addEventListener('pageshow', function () {
if (isPageHide) {
window.location.reload()
}
})
window.addEventListener('pagehide', function () {
isPageHide = true
})
} else {
const needRefresh = sessionStorage.getItem('need-refresh')
if (needRefresh) {
sessionStorage.removeItem('need-refresh')
window.location.reload()
}
}
}
}
nuxt.config.js代码:
plugins: [
{ src: '@/plugins/weixin.js', ssr: false}
],