android 端 H5 开发遇到相关问题汇总（未完待续）

写在前面

H5 是现在移动端开发的一个趋势，可以使用同一套代码在多个平台进行运行，大大节省产品开发的工作量。但是，由于兼容性问题会有许多坑需要我们去填。本篇文章主要用来记录
h5 开发在安卓上遇到的各种坑。
同时也欢迎大家进行补充
转载注明原文地址：http://www.jianshu.com/p/535df00c5e14

一、多媒体上传

1.1 主要问题

1 安卓原生 WebView 不响应 input

2 选择图片之后图片文件未回传给H5界面

1.2 问题分析

H5 端上上传代码

问题1

实测在微信、QQ浏览器、UC浏览器上可打开文件选择界面

image.png

而用安卓原生 WebView 上点击上传文件按钮则无响应，说明浏览器在安卓本地对input标签的事件响应做过处理
查看开源 android 浏览器源码 https://github.com/scoute-dich/browser/blob/master/app/src/main/java/de/baumann/browser/fragments/Fragment_Browser.java 471行，发现需重写 WebChromeClient 的 onShowFileChooser（android 5.0 以上）和 openFileChooser（android 4.1 - 4.4）方法，调出android的文件选择器。

问题2

android 是通过 onReceiveValue 函数给 h5 端传递返回值的，而该方法的参数则是 URI,将 android 端给 h5 界面的 URI 打印出来是 “content://com.android.providers.media.documents/document/image%3A74097” 这种格式，从百度上的得知，有的 android 手机的 webview 无法解析 content 形式的 URI ，需要转换成 file 开头的格式，如“file:///storage/emulated/0/Pictures/Screenshots/S70914-21392512.jpg”，转化成 file 格式的 URI 之后 h5 端成功解析，问题解决

二、百度地图相关

2.1 主要问题

1 部分手机无法获取到定位
2 百度地图点击事件在手机上无效，准确说是点多次才触发一次

2.2 问题分析

问题1：部分手机无法获取到定位

经过百度搜素 h5 要获取定位权限需要添加：

（1）添加定位权限

（2）设置 webview.setting

WebSettings settings = webview.getSettings();
settings.setGeolocationEnabled(true);//允许地理位置可用

（3）继承 WebChromeClient 类并且重写其 onGeolocationPermissionsShowPrompt 函数

class MyChromeViewClient extends WebChromeClient {
        public void onGeolocationPermissionsShowPrompt(final String origin, final android.webkit.GeolocationPermissions.Callback callback) {
            final boolean remember = true;
            AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
            builder.setTitle("位置信息");
            builder.setMessage(origin + "允许获取您的地理位置信息吗？").setCancelable(true).setPositiveButton("允许",
                    new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog,
                                            int id) {
                            callback.invoke(origin, true, remember);
                        }
                    })
                    .setNegativeButton("不允许",
                            new DialogInterface.OnClickListener() {
                                @Override
                                public void onClick(DialogInterface dialog,
                                                    int id) {
                                    callback.invoke(origin, false, remember);
                                }
                            });
            AlertDialog alert = builder.create();
            alert.show();
        }
 }

这三步之后在大部分手机上 h5 的百度地图就可以获取到定位了，但是在 meizu 的 flyme 上去获取不到，经测试个版本的 flyme 均获取不到，而与 flyme 相同 android 版本的其他手机上却可以获取到，因此猜测是 flyme 改写 webview 的底层代码。

最终采取的解决办法是引入 tencent 的浏览服务，采用 QQ 浏览器的 webview 内核替换原生的 webview ，替换后成功在魅族手机上获取定位

腾讯TBS浏览服务
https://x5.tencent.com/tbs/

问题2：百度地图点击事件在手机上无效（多发生于 android 7.0 系统）

经过百度搜索，有人说是点击事件和拖拽事件冲突了，果然屏蔽拖拽事件之后，点击事件正常响应了，但是作为一个地图界面，怎么能禁用拖拽事件！！！
查看百度地图的 api
http://lbsyun.baidu.com/cms/jsapi/class/jsapi_reference.html#a0b0
得知，百度地图有专门针对移动端的 longpress 事件，因此用 longpress 事件替换 click 事件

如果各位有更好的办法欢迎提出交流