微信H5,返回上一步页面不会自动刷新

963 阅读1分钟

在最近的威胁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服务端渲染框架,所以得加几步:
  1. 在plugins文件中添加weixin.js文件,将以上代码放上
  2. 在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}
  ],