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

写在前面

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

一、多媒体上传

1.1 主要问题

1 安卓原生 WebView 不响应 input

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

1.2 问题分析

H5 端上上传代码


问题1

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

android 端 H5 开发遇到相关问题汇总(未完待续)_第1张图片
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 事件

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

你可能感兴趣的:(android 端 H5 开发遇到相关问题汇总(未完待续))