H5移动端安卓机input上传附件点击无反应问题及其他安卓与webview兼容性问题、

H5移动端安卓机input上传附件点击无反应问题及其他安卓兼容性问题

  • 一、问题
  • 二、查找原因
  • 三、其他兼容性问题
  • 四、总结

一、问题

最近在赶项目的时候,做了H5并嵌入webview中。发现点击H5中 input type=“file” 标签 不能打开android资源管理器。

// An highlighted block
<input type="file" accept="image/*;capture=camera">

IOS手机中,可以直接呼起相机和相册;
安卓手机则不行,部分浏览器没问题;

二、查找原因

网上一查发现有许多开发人员也遇到过这个问题。
H5移动端安卓机input上传附件点击无反应问题及其他安卓与webview兼容性问题、_第1张图片
我参考许多资料,几乎可以判断是安卓与小程序webview的兼容性,参考许多人的处理方法都不起作用。
正当我寻找各种解决兼容性问题的办法的时候,发现官方早已在2019年10月份已经修复了这个兼容性问题。网上的遇到同款问题也无一例外的是2019/10月份之前的。
H5移动端安卓机input上传附件点击无反应问题及其他安卓与webview兼容性问题、_第2张图片
我想既然不是兼容性,那么问题就好解决了。
初步怀疑的问题有
1:样式层级问题
2:浏览器默认事件、冒泡事件等等。。
3:安卓机型版本问题
4:组件问题
逐一排查外加处理,都还是没有解决问题

实在是没有办法,于是找了其他大佬帮忙看看原因
问题的转折点来了
大佬在他那边本地用安卓是可以打开的!!

我在本地试了一下,果然bug瞬间解决。(之前一直用ip地址测试环境去测试)
估计是公司ip内网的限制,随后更换外网IP,再发布果然好起来了

再往深一了解,原来是内网IP地址和微信webview的冲突
换个外网IP地址或者早点上个域名就不会遇到这么多事

三、其他兼容性问题

①安卓端在小程序webview跳转H5当中,URL参数是无法传送中文的

在开发过程中,我用PC端、ios端,URL参数都是可以传中文的,所有并没有特意去做URL中文转码,直到测试投诉安卓端URL中文带不过来
PC端、IOS端都会对URL中文自动转码,但是安卓端不会,所以该转码就得转码,不能偷懒

转码的方式有两种
一种是直接对整个URL进行转码,二是单独对中文参数转码

//小程序webview跳转前对URL或中文参数进行两次转码
encodeURI(encodeURI(URL))
//H5接收参数解码
decodeURI(URL)
//其他转码解码方式:
//只针对文本编码 encodeURI() 
//只针对文本解码 decodeURI()
//针对文本和特殊字符的编码  encodeURIComponent()
//针对文本和特殊字符的解码  decodeURIComponent()

四、总结

如果你也遇到这个问题,同时用的也是IP地址,不妨试试换个上个域名或者用本地地址测试。
虽然这次遇到的“BUG”虚惊一场,但是在排查与解决的过程中,还是意外收获到了许多其他的知识点。

你可能感兴趣的:(前端,安卓,javascript,es6,webview,安卓,小程序)