Vue.js实战——开发Android H5 App之Webview高级配置_13

一、目的

    1、在H5 Android App开发过程中，尤其是移植来自IOS/微信/纯Web浏览器等平台的H5时，需要解决一些平台特有的特性，比如弹窗、获取经纬度、拍照、录音等API，就不尽相同，现在就想通过纯Web原生实现的方式，通过改变中间的JS或者Android代码，从而保证原生Web页面不用做任何更改；

    2、此文采用循序渐进的方式，先讲解下如何实现弹窗和经纬度（下述所有代码均在前面的Vue.js实战——移植Html5 App为Android App_10篇已经提供了）。

二、步骤

    1、在H5中，弹窗是使用alert("xxxx")，在Android平台上，该H5上的此代码是不会执行的，所以需要在WebChromeClient中覆写弹窗的方法，把H5的弹窗，更换成Android的弹窗；

    代码示例：

public class BtWebChromeClient extends WebChromeClient
{
    @Override
    public boolean onJsAlert(WebView view, String url, String message, final JsResult result)
    {
        AlertDialog.Builder builder = new AlertDialog.Builder(view.getContext());
        builder.setTitle("提示");
        builder.setMessage(message);
        builder.setPositiveButton("确定", new AlertDialog.OnClickListener()
        {
            @Override
            public void onClick(DialogInterface dialog, int which)
            {
                result.confirm();
            }
        });
        
        DialogInterface.OnKeyListener listener = new DialogInterface.OnKeyListener()
        {
            public boolean onKey(DialogInterface dialog, int keyCode, KeyEvent event)
            {
                return true;
            }
        };
        // 屏蔽keycode等于84之类的按键
        builder.setOnKeyListener(listener);
        
        builder.setCancelable(false);
        builder.create();
        builder.show();
        return true;
    }
}    

    注意：最好像上述代码那样屏蔽掉Android系统的按键对弹窗的影响。

    2、以前我们在原生H5上获取浏览器时，使用navigator.geolocation.getCurrentPosition，具体代码：

            navigator.geolocation.getCurrentPosition(
                (res) => {
                    console.log("get location successful:" + res);
                    let location = {};
                    location.longitude = res.coords.longitude;
                    location.latitude = res.coords.latitude;
                    callback.success(location);
                },
                (res) => {
                    console.log("get location failed:" + res);
                    callback.error(res);
                },
                options
            );

    但是这在Android平台下也是不生效的，但是在Android平台下需要做如下几步：

        1）赋予获取经纬度的权限（见Vue.js实战——开发Android Hybird App之权限设置_11）；

        2）在WebSetting中设置启用地理定位：webSettings.setGeolocationEnabled(true);

        3）在WebChromeClient中覆写onGeolocationPermissionsShowPrompt方法，具体如下：

    @Override
    public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback)
    {
        Log.i(TAG, "start to set location permission.");
        callback.invoke(origin, true, false);
        super.onGeolocationPermissionsShowPrompt(origin, callback);
    }

三、总结

    1、都说先有想法，再去实践。此文中的示例就是一个比较好的例子。比如移植完Web版的代码到Android后，发现弹窗没有了，经纬度也获取不到。本人的第一想法就是在不改动一行H5代码（包括JS）的情况下，还能够保证功能正常；有了这个想法后，就开始查资料去实践，先是确认权限，让用户授予地理位置的权限，然后再去看WebView中有没有什么API可以通过覆写达到这种效果，结果还真有，在此感谢广大网友的经验；

    2、坚持每周写一篇真不是件容易的事^_^   

四、参考资料

[1]https://blog.csdn.net/skydivingwang/article/details/79311762

[2]http://www.runoob.com/html/html5-geolocation.html

 

上一篇：原 Vue.js实战——开发Android Hybird App之Webview基础配置_12  下一篇：Vue.js实战——H5拍照迁移至Android App_14