菜单 学习猿地 - LMONKEY

App内嵌webview踩坑

NathanFreeman profile image NathanFreeman ・1 min read
为移动端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配合使用的函数:envconstantenv必须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

评论 (0)