Android利用JSBridge与HTML5的交互使用

转载请注明出处：http://blog.csdn.net/jarchie520/article/details/53955934

最近在做一个论坛项目，项目当中涉及了Android Native与Html5之间的交互操作，其实主要也就是Java端与JavaScript端的交互工作，由于本人新手一枚，此前并无此方面的经验，所以就在网上找了一些相关的资料，得知在Android4.0之前，我们只需要在代码中做如下操作即可：

webView.addJavascriptInterface(new JavaScriptInterface(), "BBSMutual");

但是到了Android4.4以后，需要在调用方法的时候加上@JavascriptInterface注解才行，这是由于当时出现了一个很严重的漏洞，否则JS代码则不生效。针对以上种种，为了能够更好的开发交互，有大神封装了一套JavascriptBridge框架，省去了我们很多的工作，我们在使用的时候，只需要在项目里面依赖上这个框架，然后使用项目中自定义的Webview控件即可，开源框架可以到全球最大的同性交友网站github上面去下载。

下面来看一下交互的具体实现方法：

首先在JS端和Android端必须约定好相同的方法名称，这就类似于咱们平日里的消息通信时的一种暗号机制，

我在这里给出我写的Demo里面的一段代码介绍，我们先来看看JS端的代码，如果我们不需要传递任何参数，只是简单的调用Android中的某项操作，我们可以直接这样写：

//call native method
window.WebViewJavascriptBridge.callHandler('anqiTest');

这里的"anqiTest"就是我们约定的方法名，在Android中也会create this method，方法的内部会写一些具体的操作；如果我们需要从JS端传递一些数据或者说Android端也要为某项操作给JS端回传一些响应数据时，可以这样写：

//call native method
window.WebViewJavascriptBridge.callHandler(
    'anqiTest', {'param': data }
    , function(responseData) {

    }
);

这里的data就是我们要给Android传递的数据，然后responseData就是从Android端回传的数据。

紧接着来看一下Android端的代码：

mWebView.registerHandler("anqiTest", new BridgeHandler() {
    @Override
    public void handler(String data, CallBackFunction function) {
        if (data != null){
            String str = data.substring(0,data.length()-1);
            Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
            //回调给JS
            function.onCallBack(str);
        }else {
            popChatfaceView();
        }
    }
});

同样的，这个"anqiTest"就是约定的那个方法，在这个handler的内部携带了两个参数，第一个参数data就是JS端给Native端传递过来的参数，我们在方法内部进行接收然后去执行其它的操作，第二回调就是我们需要在Native执行完了之后将一些响应数据发送给JS端，供JS去接收。在我的Demo里如果JS没有传递任何数据，将会执行其它的操作。

我在上面很详细的讲解了在Android端和在JS端是如何去收发数据的，因为我也是刚刚接触这些知识，所以今天就简单的说到这里，只能满足一个基本的使用。

在这里推荐一篇我参考的博文给大家：http://www.bkjia.com/Androidjc/1042382.html