微信H5开发问题总结微信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()不记录地址历史，所以微信不会出现地址历史导航记录。
五、标签在flex布局中不能自适应 在标签外包一个div，div的flex设为1，的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); } })

【微信H5开发问题总结】使用scrollIntoViewIfNeeded 和 scrollIntoView 方法。