App内嵌webview踩坑

为移动端h5页面遇到的问题作些记录

1、样式部分

• 1.1 基本样式

object-fit:fill; //video铺满父元素
 -webkit-appearance:none; //消除iOS输入框的内阴影

• 1.2 刘海屏安全区域

因为iphoneX之后的版本刘海屏和底部不是完整的方型区域，形成页面显示异常。处理方式是页面将刘海屏和底部的区域排除在外使用中间部分，即所谓的安全区域。

iphoneX提供的meta头

<meta name="viewport" content="viewport-fit=contain"> //可视化窗口彻底包含网页内容
<meta name="viewport" content="viewport-fit=cover"> //网页内容彻底覆盖
<meta name="viewport" content="viewport-fit=auto"> //默认值和contain同样

若是要适配刘海屏必需要使用cover的模式

安全区域涉及四个值

safe-area-inset-left //安全区域距离左边边界距离
safe-area-inset-righ //安全区域距离右边边界距离
safe-area-inset-top //安全区域距离顶部边界距离
safe-area-inset-bottom //安全区域距离底部边界距离

左右距离通常为0，应该是页面横屏是才会用到
两个在css配合使用的函数：env和constant；env必须iOS>=11.2才支持，constant相反在iOS<11.2版本下使用。
例如：若是咱们的头部标题navbar使用position:fixed的时候须要改写成以下

.navbar{
    top:0;
    top:constant(safe-area-inset-top);
    top:env(safe-area-inset-top);/* 减去安全区域上边距 */
}

个人处理方式是使用position:relative减掉边距，内部内容区域使用position:absolute
相关连接:h5 在全屏iphonex中的适配

2、交互部分

• 2.1 App向h5通讯

将方法定义在window下，即定义成全局便可

• 2.2 h5向App通讯

iOS： window.webkit.messageHandlers[约定的名称，如项目测名称]postMessage(参数)
Android：window约定的名称，如项目测名称 (参数)

• 2.3 h5页面活跃或隐藏状态切换

这个是浏览器原生支持的方法，经过监听状态变化，具体例子以下；

const hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null;
document.addEventListener('visibilitychange', () => {
  if (document[hiddenProperty]) {
    //当离开H5 跳转到app原生的页面时,这里会被触发
    // Toast('页面隐藏了');

  } else {
    //当从原生页面用户一系列操做后,返回H5的时候,这里会被触发
    // Toast('页面展现了');
  }
});

3、兼容性处理

• 3.1 安卓上传图片

安卓端的webview，使用<input type='file'>上传图片异常，选中图片后没法回显到页面。解决方法是原生处理，以下连接；(处理完后安卓使用h5上传图片会使用相册的照片而不会有拍照选项；这里虽然不影响使用，或许能够进一步优化）
相关连接:Android WebView 不支持 H5 input type="file" 解决方法

• 3.2 页面元素显示位置与真实位置有偏差

场景：弹框中的输入框聚焦时会弹出手机的软键盘，而后收起键盘会发现，弹框中的按钮或者关闭没法点击。

当时误觉得是什么问题使页面"卡"住了，后面通过观察尝试，发现是页面发生滑动致使的。当软键盘弹出时，会把webview的可视区域向上滚动一段距离，而软键盘收起时位置没有还原回来致使页面发生偏移，监听scrollY就会看到变化过程。"卡"住产生的缘由就是位置变了，这里比较玄学的就是实际位置变了，按钮却显示在正常的位置，也致使开始没即便定位问题缘由。

解决方法：经过监听输入框的聚焦失焦，当发生失焦时(失焦时正好软键盘也收起了)使用window.scrollTo(0,0)将页面回到正常的位置

4、其余总结

由于前端项目都使用Vue框架，这里移动端页面UI库，对比mint-ui,最后选择了Vant