寫在前面

H5 是現(xiàn)在移動端開發(fā)的一個趨勢，可以使用同一套代碼在多個平臺進行運行，大大節(jié)省產(chǎn)品開發(fā)的工作量。但是，由于兼容性問題會有許多坑需要我們?nèi)ヌ?。本篇文章主要用來記?br> h5 開發(fā)在安卓上遇到的各種坑。
同時也歡迎大家進行補充
轉載注明原文地址：http://www.itdecent.cn/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瀏覽器上可打開文件選擇界面

image.png

問題2

android 是通過 onReceiveValue 函數(shù)給 h5 端傳遞返回值的，而該方法的參數(shù)則是 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 百度地圖點擊事件在手機上無效，準確說是點多次才觸發(fā)一次

2.2 問題分析

問題1：部分手機無法獲取到定位

經(jīng)過百度搜素 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 函數(shù)

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 上去獲取不到，經(jīng)測試個版本的 flyme 均獲取不到，而與 flyme 相同 android 版本的其他手機上卻可以獲取到，因此猜測是 flyme 改寫 webview 的底層代碼。

最終采取的解決辦法是引入 tencent 的瀏覽服務，采用 QQ 瀏覽器的 webview 內(nèi)核替換原生的 webview ，替換后成功在魅族手機上獲取定位

騰訊TBS瀏覽服務
https://x5.tencent.com/tbs/

問題2：百度地圖點擊事件在手機上無效（多發(fā)生于 android 7.0 系統(tǒng)）

經(jīng)過百度搜索，有人說是點擊事件和拖拽事件沖突了，果然屏蔽拖拽事件之后，點擊事件正常響應了，但是作為一個地圖界面，怎么能禁用拖拽事件?。?！
查看百度地圖的 api
http://lbsyun.baidu.com/cms/jsapi/class/jsapi_reference.html#a0b0
得知，百度地圖有專門針對移動端的 longpress 事件，因此用 longpress 事件替換 click 事件

如果各位有更好的辦法歡迎提出交流