App内嵌webview踩坑

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

一、样式部分

• 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.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.1 安卓上传图片

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

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

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

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

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

四、其他总结

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