写在前面
H5 是现在移动端开发的一个趋势，可以使用同一套代码在多个平台进行运行，大大节省产品开发的工作量。但是，由于兼容性问题会有许多坑需要我们去填。本篇文章主要用来记录
h5 开发在安卓上遇到的各种坑。
同时也欢迎大家进行补充
转载注明原文地址：//www.greatytc.com/p/535df00c5e14
一、多媒体上传
1.1 主要问题
1 安卓原生 WebView 不响应 input
2 选择图片之后图片文件未回传给H5界面
1.2 问题分析
H5 端上上传代码
<input type="file" name="file" accept="image/*" multiple="multiple" @change="onFileChange"
style="display: none;width:0;height:0"/>
问题1
实测在微信、QQ浏览器、UC浏览器上可打开文件选择界面
而用安卓原生 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）添加定位权限
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
（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 事件
如果各位有更好的办法欢迎提出交流
