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配合使用的函数: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

Image placeholder
maoxfjob
未设置
  95人点赞

没有讨论,发表一下自己的看法吧

推荐文章
react-native中IOS的webview和js层通信 - UIWebview

前言在9012的最后一篇写到了在rn中安卓的webview的通信原理,而作为0202年的第一篇,继续讨论上年rn中webview通信剩下的部分。背景:对于webview,了解过的人都知道在ios端会存

Hotaru CMS PHP内容管理系统

推荐课程《PHP开发工程师--学习猿地精品在线课》 软件简介 HotaruCMS是一个开源的PHP内容管理系统,拥有灵活的插件系统和多种主题,可以帮助你创建你喜欢的任意网站。Hotaru常用做网络书签

GoWeb教程_08.0. Web 服务

Web服务可以让你在HTTP协议的基础上通过XML或者JSON来交换信息。如果你想知道上海的天气预报、中国石油的股价或者淘宝商家的一个商品信息,你可以编写一段简短的代码,通过抓取这些信息然后通过标准的

GoWeb教程_08.2. WebSocket

WebSocket是HTML5的重要特性,它实现了基于浏览器的远程socket,它使浏览器和服务器可以进行全双工通信,许多浏览器(Firefox、GoogleChrome和Safari)都已对此做了支

GoWeb教程_13.0. 如何设计一个 Web 框架

前面十二章介绍了如何通过Go来开发Web应用,介绍了很多基础知识、开发工具和开发技巧,那么我们这一章通过这些知识来实现一个简易的Web框架。通过Go语言来实现一个完整的框架设计,这框架中主要内容有第一

GoWeb教程_14.0. 扩展 Web 框架

第十三章介绍了如何开发一个Web框架,通过介绍MVC、路由、日志处理、配置处理完成了一个基本的框架系统,但是一个好的框架需要一些方便的辅助工具来快速的开发Web,那么我们这一章将就如何提供一些快速开发

一文看懂web服务器、应用服务器、web容器、反向代理服务器区别与联系

课程推荐《web全栈开发就业班--拿到offer再缴学费--融职教育》 1.1.Web服务器概念与基本原理 1.1.1.Web服务器的历史1989年,互联网之父Berners-Lee向其雇主CERN提

Docker容器实现原理及容器隔离性踩坑介绍

本文讲述了 关于容器隔离性的一个“坑”正如Docker官方的口号:“Buildonce,Runanywhere,Configureonce,Runanything”,Docker被贴上了如下标签:轻巧

HBase实战:记一次Safepoint导致长时间STW的踩坑之旅

本文记录了HBase中Safepoint导致长时间STW此问题的解决思路及办法。过程记录现象:小米有一个比较大的公共离线HBase集群,用户很多,每天有大量的MapReduce或Spark离线分析任务

GoWeb教程_14.6. pprof 支持

Go语言有一个非常棒的设计就是标准库里面带有代码的性能监控工具,在两个地方有包: net/http/pprof runtime/pprof 其实net/http/pprof中只是使用runtime

PPT 分享:《10 个 Go Web 开发框架对比》

在SpeakerDeck上发现一个不错的PPT分享给大家。 原链接:https://speakerdeck.com/fedir/comparison-o... 百度盘链接:https://pan.ba

《从PPTV网络视频,到PPIO区块链分布式存储》

摘要:2019年11月26日,同济创业谷与PPIOCodeTalks联合举办了《创新X-区块链与创新创业》区块链技术分享会,本期我们为读者带来主题分享--《从PPTV网络视频,到PPIO区块链分布式存

Pandas数据处理三板斧——map、apply、applymap详解

微信公众号:「Python读财」如有问题或建议,请公众号留言在日常的数据处理中,经常会对一个DataFrame进行逐行、逐列和逐元素的操作,对应这些操作,Pandas中的map、apply和apply

安装vant-weapp 组件

推荐课程:学习猿地--前端开发工程师--点击进入 一、新建小程序项目二、打开cmd,小程序项目目录下npmivant-weapp-S--production 2.1如果执行上面的代码报错了 那你就执行

使用 ivx 开发 web 全栈项目

前言 本人是一枚喜欢探索黑科技的web前端,没事喜欢研究研究框架,了解网络技术/工具等等。最近在研究saas和paas的时候在知乎专栏有大佬提到了一款在线页面编辑系统——ivx。看到这里在做的大佬估

使用 ivx 开发 web 全栈项目

前言 本人是一枚喜欢探索黑科技的web前端,没事喜欢研究研究框架,了解网络技术/工具等等。最近在研究saas和paas的时候在知乎专栏有大佬提到了一款在线页面编辑系统——ivx。看到这里在做的大佬估

03.0 Web 基础

学习基于Web的编程可能正是你读本书的原因。事实上,如何通过Go来编写Web应用也是我编写这本书的初衷。前面已经介绍过,Go目前已经拥有了成熟的HTTP处理包,这使得编写能做任何事情的动态Web程序易

03.1. Web 工作方式

我们平时浏览网页的时候,会打开浏览器,输入网址后按下回车键,然后就会显示出你想要浏览的内容。在这个看似简单的用户行为背后,到底隐藏了些什么呢? 对于普通的上网过程,系统其实是这样做的:浏览器本身是一个

03.2. Go 搭建一个 Web 服务器

前面小节已经介绍了Web是基于http协议的一个服务,Go语言里面提供了一个完善的net/http包,通过http包可以很方便的就搭建起来一个可以运行的Web服务。同时使用这个包能很简单地对Web的路

03.3. Go 如何使得 Web 工作

前面小节介绍了如何通过Go搭建一个Web服务,我们可以看到简单应用一个net/http包就方便的搭建起来了。那么Go在底层到底是怎么做的呢?万变不离其宗,Go的Web服务工作也离不开我们第一小节介绍的

GoWeb教程_04.5. 处理文件上传

你想处理一个由用户上传的文件,比如你正在建设一个类似Instagram的网站,你需要存储用户拍摄的照片。这种需求该如何实现呢? 要使表单能够上传文件,首先第一步就是要添加form的enctype属性,

GoWeb教程_ 04.6. 小结

这一章里面我们学习了Go如何处理表单信息,我们通过用户登录、上传文件的例子展示了Go处理form表单信息及上传文件的手段。但是在处理表单过程中我们需要验证用户输入的信息,考虑到网站安全的重要性,数据过

GoWeb教程_05.0 访问数据库

对许多Web应用程序而言,数据库都是其核心所在。数据库几乎可以用来存储你想查询和修改的任何信息,比如用户信息、产品目录或者新闻列表等。 Go没有内置的驱动支持任何的数据库,但是Go定义了databas

GoWeb教程_05.1. database/sql 接口

Go与PHP不同的地方是Go官方没有提供数据库驱动,而是为开发数据库驱动定义了一些标准接口,开发者可以根据定义的接口来开发相应的数据库驱动,这样做有一个好处,只要是按照标准接口开发的代码,以后需要迁移

GoWeb教程_05.4. 使用 PostgreSQL 数据库

PostgreSQL是一个自由的对象-关系数据库服务器(数据库管理系统),它在灵活的BSD-风格许可证下发行。它提供了相对其他开放源代码数据库系统(比如MySQL和Firebird),和对专有系统比如