h5踩坑记录

IOS 上滑底部会漏出白边，效果不佳，故需要在 IOS 中有蒙层出现时禁止上滑，从而能够提高用户体验性。通过给 body 标签加样式 style="overflow: hidden;" 即可解决该问题。理解是将页面多余部分隐藏后即不可滑动。
当需要从微信相关页面返回到自己开发的页面时，微信隐藏了正确的referer，即无法通过判断是否有referer来确定进入当前页面是从外部进入还是从其他页面返回。故当需要判断所在页面的进入前的状态时可用缓存的方式来解决。
ios 中无法长按识别页面中的二维码。原因：微信内置浏览器对 history 的支持不够全面，所以对于开启了 History Mode 的 SPA 应用，只会保存第一条 url。故需要强制刷新页面一次即可解决这个问题。

if(!window.location.href.match('timeRandom')) {
//加该层判断是为了避免进入该页面重复刷新，只刷新一次即可
         setTimeout(() => {
            window.location = window.location + "#timeRandom"
         } , 50);
  }

禁止返回到前一个页面：

window.addEventListener('popstate', function () {
        console.log('location.href===', location.href)
          history.pushState(null, null, location.href); //先popState再向历史栈中继续加入当前页面，相当于将当前页面从栈中Pop出后再Push,所以history.length不变
      });

h5页面禁止分享，即隐藏页面右上角的分享按钮

//禁止分享
export function forbidShare() {
    function onBridgeReady() {
        console.log("wx.WeixinJSBridge",WeixinJSBridge)
        WeixinJSBridge.call('hideOptionMenu');
    }
    if (typeof WeixinJSBridge == "undefined") {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
    } else {
        onBridgeReady();
    }
}

通过 window.performance.navigation.type == 2 可判断表示当前页面行为是否是 history.back() 或 history.forward() 行为，可以解决一般情况下的进入当前页面前的状态是什么。
在vue history模式下，不能直接通过输入链接访问除默认首页以外的其他路由对应的组件。会直接显示404。例如，目前有pay.html和result两个路由（pay.html为webpack中输出的默认页面）,当通过输入http://localhost:8080/result时会报错，这是因为是history模式经典的弊端：当刷新页面（相当于直接访问result路由）时，会去重新请求后端，且将当前url作为请求url，由于vue是单页面应用，且生成的页面为pay.html，实际上是不存在result路由对应的页面的，故当重新请求后端时，会显示404。如果需要单独访问result对应组件，则需要拆分为多页面。

猜你喜欢