h5踩坑记录

ゞ浴缸里的玫瑰 2023-02-26 06:20 66阅读 0赞

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

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

1.  禁止返回到前一个页面：

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

1.  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();
        }
    }

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