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