h5兼容性问题总结

ios返回页面不刷新

描述：从主页面跳转到其他页面，点击左上角返回按钮回到主页面，发现页面没有刷新，而是直接读取的缓存

解决：

      let browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/;
      if (browserRule.test(navigator.userAgent)) {
        window.onpageshow = event => {
          if (event.persisted) { //如果event.persisted为true，证明该页面被浏览器缓存了
            this.initPage(); // 重新执行初始化页面方法
          }
        };
      }

2.8.7vant轮播图组件`在ios微信里有样式bug

描述：主页面跳转到其他页面再返回以后,轮播图样式错乱

解决：改为使用`swiper插件`

h5跳转小程序问题

1. 跳转`小程序`标签在`微信jssdk 1.4.0`下不生效

解决：跳转小程序标签需要使用`1.6.0`及其以上的版本

2. ios点击跳转按钮无效

描述：在`ios微信端`从未授权的链接进入主页面，需要刷新一下才能按钮才能生效，但直接通过已授权过的链接进入就没有这样的问题

解决：给`初始化微信jssdk`加了1s的延时,再次测试没有出现问题

3. 跳转`小程序`后，监听小程序关闭的方法

描述：需求需要在关闭`小程序`后，刷新当前页面，但在微信文档没有找到h5监听小程序关闭的回调等方法

解决：使用`visibilitychange`事件监听页面的显示隐藏

        let hiddenProperty =
        "hidden" in document
          ? "hidden"
          : "webkitHidden" in document
          ? "webkitHidden"
          : "mozHidden" in document
          ? "mozHidden"
          : null;
      document.addEventListener("visibilitychange", () => {
        if (document[hiddenProperty]) {
          // console.log("页面隐藏了");
        } else {
          // console.log("页面显示了");
        }
      });

注意：1.由于兼容性原因，请确保使用`document.addEventListener`而不是`window.addEventListener`,`Safari<14`仅支持前者

　　　 2.`Safari7`不支持该事件

挽留弹框问题

1. 华为手机需要手动点一下才会触发`popstate`

解决：暂时没有找到解决方法

2. ios跳转页面点击返回，页面出现挽留弹框

解决：从其他页面返回不注册弹框事件

window.addEventListener(
   "popstate",
   () => {
       //跳转页面时加上的flag
     let goProduct = localStorage.getItem("goProduct") || "";
     if (goProduct) {
       localStorage.removeItem("goProduct");
     } else {
       this.pupObj.detainFlag = true;
       this.pupObj.detainCash = this.cashCount;
     }
   },
   false
 );