搜索   Search
联系我们   Contact

HTML5,js与Android native通信

发布:2015-12-10 14:39 点击:

概述

何为h5,js与Android通信?其实说白了就是js调用Android本地方法和Android本地调用js方法之间的一个过程。这篇文章主要是讲述一个简单的通信方式,至于通信间数据的协议我用的是jsonRpc,在这里不做过多的描述,不懂的可以自行查阅,因为大多数人通信时不会用这个。

webview设置

这个应该不是问题,大概的设置就是一些基本项,这里贴一下代码,没有什么特殊的。

private void initWebView() {
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDatabaseEnabled(true);
//        webSettings.setDatabasePath("/data/data/" + Envi.appContext.getPackageName() + "/localstorage/");
        webSettings.setDomStorageEnabled(true);
        webSettings.setSavePassword(false);
        webSettings.setSaveFormData(true);
        webSettings.setSupportZoom(false);
        webSettings.setGeolocationEnabled(true);
        webSettings.setDomStorageEnabled(true);
        webSettings.setAppCacheEnabled(true);
        webSettings.setAllowFileAccess(true);
//        webSettings.setAppCacheMaxSize(100 * 1024 * 1024);
//        webSettings.setAppCachePath("/data/data/" + Envi.appContext.getPackageName() + "/cache/");
//        webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);

//        String userAgent = webSettings.getUserAgentString();
//        userAgent = userAgent + "  ganji_" + Envi.customerId + "_" + Envi.versionName;
//        webSettings.setUserAgentString(userAgent);
    }

这里可以根据需求注释/打开某些设置。

webView.setWebViewClient(new WebViewClient() {

            @Override
            public void onLoadResource(WebView view, String url) {
                super.onLoadResource(view, url);
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                return super.shouldOverrideUrlLoading(view, url);
            }

            @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                Log.e("html5", "webview receive error: " + description);
                super.onReceivedError(view, errorCode, description, failingUrl);
                mWebViewReceivedError = true;
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                mPageLoadFinished = true;
                if (mWebViewReceivedError) {//TODO network is ok?
                    webView.post(new Runnable() {
                        @Override
                        public void run() {
                            webView.setVisibility(View.GONE);
//                            mLoadFailContainer.setVisibility(View.VISIBLE);
                        }
                    });
                }
            }

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
            }
        });

        webView.setWebChromeClient(new WebChromeClient() {

            @Override
            public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {
                callback.invoke(origin, true, false);
                super.onGeolocationPermissionsShowPrompt(origin, callback);
            }

            @Override
            public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                return true;
            }

            @Override
            public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
                return true;
            }

            @Override
            public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
                return true;
            }

            @Override
            public void onExceededDatabaseQuota(String url, String databaseIdentifier, long quota, long estimatedDatabaseSize, long totalQuota,
                                                WebStorage.QuotaUpdater quotaUpdater) {
                quotaUpdater.updateQuota(estimatedDatabaseSize * 2);
            }

            @Override
            public void onReachedMaxAppCacheSize(long requiredStorage, long quota, WebStorage.QuotaUpdater quotaUpdater) {
                quotaUpdater.updateQuota(requiredStorage * 2);
            }

        });

这里没什么参考的必要,主要是对两个Client的设置,根据你的需求来。

native 调用js方法

下面说重点,js调用native方法,首先,我贴下我js的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script>  
        function showInfo(str)  
        {  
            document.getElementById("info").innerHTML=str;  
        }  
    </script>  
</head>  
    <body>
        从Android传来的值是:<span id="info"> </span>
        <br>  
        <a href="#" onclick="window.GJNativeAPI.callAndroid(‘I am come from android.‘)">
        call Android from javascript  
        </a>  
    </body>  
</html>

这里比较重要的是,要定义好function方法的名字,native调用时就是根据这个调用的。我在一个button点击事件里调用它:

btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //调用此语句,调用js里的方法
                webView.loadUrl("javascript:showInfo(‘hello js‘)");
            }
        });

这样就挖成了一个native调用js方法。重点是js的方法名,和Android的javascript:后的方法名一致。

js调用native方法

这个还要对webview做一个额外的设置:

mWebView.addJavascriptInterface(new GJNativeAPI(), "GJNativeAPI");

然后我们看看这个GJNativeAPI是什么东东:

/**
     * 供 js 调用的本地对象
     */
    public class GJNativeAPI {

        /**
         * js 调用该方法发起 rpc 调用,或者返回 rpc 响应
         */
        @JavascriptInterface
        public void callAndroid(final String str) {
            System.out.print("!!!!"+str);
            activity.setText(str);
        }
    }

这是我自定义的一个内部类,它里面有一个callAndroid方法,注意上边一定要写上@JavascriptInterface,不然某些版本的sdk上是有错的。 
然后我们回头看js文件:

        <a href="#" onclick="window.GJNativeAPI.callAndroid(‘I am come from android.‘)">

window是调用native方法时要加的,GJNativeAPI是我们的那个自定义内部类,callAndroid是我们写的那个方法,这样就完成了调用。

注意

如果你这么写:

btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //调用此语句,可以调用js里调用Android相关的方法,最终还是回到Android native                webView.loadUrl("javascript:window.GJNativeAPI.callAndroid(‘hello js‘)");
            }
});

你会发现,你在native调用的,又回到了native,就是在js上走了一圈。


关闭 大豪方案承接以下业务:

单片机开发
智能家居方案开发
ARM软件开发
手机APP软件开发
电子产品电路设计
电子产品开发
无线控制系统开发
产品老化测试系统定制
单片机工控系统定制
电子产品合作开发
动静态数据采集系统
应力应变测试开发
欢迎新老客户来电咨询! 13530382506