微信H5开发问题总结

最近一段时间都在做基于微信的一些推广、宣传的H5页面的开发，所以开个帖来总结一下遇到的一些问题。

一、微信H5在IOS中出现滚动不流畅的问题

  -webkit-overflow-scrolling : touch;

二、css隐藏滚动条

::-webkit-scrollbar{
display:none;  // 大部分机型上生效，ios上无效
width:0 !important;  // chrome 和 safari
}
-ms-overflow-style:none;  //  IE10+
overflow:-moz-scrollerbars-none; // firefox

备注:这种做法在ios上无效。

三、锁屏或者后台运行微信时，背景音乐仍在播放

visibilitychange 事件。visibilitychange事件在锁屏或者切换后台运行微信时都会触发。
document.hidden 属性。document.hidden属性记录当前文档是否隐藏。

document.addEventListener("visibilitychange",()=>{
    if(document.hidden){   // 如果锁屏或者后台运行，暂停背景音乐
        bg.stop()
    }else{
        this.fallBackPlay(); // 如果不是，回弹之前的状态。
    }
});

四、使用vue-router时，用push()进行路由导航，ios手机底部出现地址导航栏

目前没有找到更好的解决方法。
如果需要使用vue-router进行路由管理，可以使用replace()方法代替。
replace()不记录地址历史，所以微信不会出现地址历史导航记录。

五、<input>标签在flex布局中不能自适应

在<input>标签外包一个div，div的flex设为1，<input>的width设为100%。

六、轨迹运动

元素沿轨迹运动可以通过offset-path和offset-distance实现。

七、点击input元素聚焦，元素没有出现在可视区域

//微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法
window.addEventListener("resize", function() {
    if(document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
        window.setTimeout(function() {
            document.activeElement.scrollIntoViewIfNeeded();
        }, 0);
    }
})

使用scrollIntoViewIfNeeded 和 scrollIntoView 方法。