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
      );