Android中实现Native与H5的通信方案汇总

一、利用JsBridge实现Native与H5的双向通信

Android中的JSBridge是H5与Native通信的桥梁，其作用是实现H5与Native间的双向通信。在Android中展现H5也就用到了Webview，之前写了一篇文章Android WebView简单使用以及实现native与h5交互,主要就是介绍一个webview的用法介绍及WebViewClient和WebChromeClient一些常用的方法。在结尾的时候简单介绍了下Native与H5的相互调用，也没怎么讲具体怎么用，今天就在这里做一下笔记。

既然这里讲述了JsBridge，所以可以移步这里看看lzyzsd/JsBridge，里面有介绍使用方法。我这下面也接着啰嗦一下：

1、引入资源文件

repositories {    // ...    maven { url "https://jitpack.io" }}dependencies {    compile 'com.github.lzyzsd:jsbridge:1.0.4'}

2、布局文件

<?xml version="1.0" encoding="utf-8"?>

3、在项目assets目录下存放的以下文件

jsbridge.js文件

function connectWebViewJavascriptBridge(callback) {    if (window.WebViewJavascriptBridge) {        callback(WebViewJavascriptBridge)    } else {        document.addEventListener('WebViewJavascriptBridgeReady', function () {            callback(WebViewJavascriptBridge)        }, false)    }}connectWebViewJavascriptBridge(function (bridge) {    bridge.init(function (message, responseCallback) {        var data = {'Javascript Responds': 'Wee!'}        responseCallback(data)    })})//H5调用Native方法function JsCallAndroid(data) {    window.WebViewJavascriptBridge.callHandler(       'JsCallAndroid'       ,data       , function(responseData) {              alert(responseData)       }   );}function JsCallAndroid2() {    window.WebViewJavascriptBridge.callHandler(       'JsCallAndroid2'       ,''       , function(responseData) {              alert(responseData)       }   );}//Native调用H5方法bridge.registerHandler("functionInJs", function(data, responseCallback) {    alert(data);   var responseData = "我接受到了安卓的调用";   responseCallback(responseData);});

index.html文件

JsBridgeDemo

4、在对应activity中调用

        button = (Button) findViewById(R.id.android_call_js);        bridgeWebView = (BridgeWebView) findViewById(R.id.JsBridgeWebView);        bridgeWebView.setDefaultHandler(new DefaultHandler());        bridgeWebView.setWebChromeClient(new WebChromeClient());        bridgeWebView.setWebViewClient( new BridgeWebViewClient(bridgeWebView));        bridgeWebView.loadUrl("file:///android_asset/index.html");        /**         * js发送给按住消息   JsCallAndroid是js调用的方法名    安卓\返回给js         */        bridgeWebView.registerHandler("JsCallAndroid", new BridgeHandler() {            @Override            public void handler(String data, CallBackFunction function) {                //显示接收的消息                showToast(data);                //返回给html的消息                function.onCallBack( "返回给Toast的alert");            }        });        button.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                /**                 * 给Html发消息   js接收并返回data                 */                bridgeWebView.callHandler("functionInJs", "调用js的方法", new CallBackFunction() {                    @Override                    public void onCallBack(String data) {                        showToast("==="  + data);                    }                });            }        });

下面这里的代码段目的就是在Android端注册H5调用native方法的回调，这里的JsCallAndroid要和jsbridge.js文件中的window.WebViewJavascriptBridge.callHandler中的key保持一致也为JsCallAndroid：

         /**         * js发送给按住消息   JsCallAndroid是js调用的方法名    安卓\返回给js         */        bridgeWebView.registerHandler("JsCallAndroid", new BridgeHandler() {            @Override            public void handler(String data, CallBackFunction function) {                //显示接收的消息                showToast(data);                //返回给html的消息                function.onCallBack( "返回给Toast的alert");            }        });

5、上述的bridgeWebView.registerHandler实现的是单个回调事件的注册，下面我们实现批量注册本地java方法，以供js端调用
先写一个回调接口：

import com.github.lzyzsd.jsbridge.CallBackFunction;public interface JsHandler {    public void OnHandler(String handlerName, String responseData, CallBackFunction function);}

在对应使用的activity中添加以下方法：

/**     * 批量注册本地java方法，以供js端调用     *     * @param handlerNames 方法名称数组     * @param handler      回调接口     */    public void registerHandlers(final ArrayList handlerNames, final JsHandler handler) {        if (handler != null) {            for (final String handlerName : handlerNames) {                bridgeWebView.registerHandler(handlerName, new BridgeHandler() {                    @Override                    public void handler(String data, CallBackFunction function) {                        handler.OnHandler(handlerName, data, function);                    }                });            }        }    }

那么如何使用呢？将第4模块中的bridgeWebView.registerHandler方法替换如下：

        ArrayList mHandlers = new ArrayList<>();        mHandlers.add("JsCallAndroid");        mHandlers.add("JsCallAndroid2");        registerHandlers(mHandlers, new JsHandler() {            @Override            public void OnHandler(String handlerName, String responseData, CallBackFunction function) {                LogUtil.d(responseData);                if (handlerName.equals("JsCallAndroid")){                   Log.d("TAG","JsCallAndroid");                }else if (handlerName.equals("JsCallAndroid2")){                    Log.d("TAG","JsCallAndroid2");                }            }        });

二、Android系统H5调用原生的方式

对WebView进行初始化

WebSettings settings = webview.getSettings();settings.setJavaScriptEnabled(true); //允许在WebView中使用js

创建一个类JsMethod，提供给js调用的方法工具类（注意：在Android4.2之后，为了提高代码安全性，方法必须使用注解@JavascriptInterface，否则无法调用）

    @JavascriptInterface    //andorid4.2（包括android4.2）以上，如果不写该注解，js无法调用android方法    public static void showToast(String json){        Toast.makeText(context, json, Toast.LENGTH_SHORT).show();    }

在WebView初始化代码中执行如下代码

//创建上面创建类的对象    JsMethod m = new JsMethod(this, webview);    //其实就是告诉js，我提供给哪个对象给你调用，这样js就可以调用对象里面的方法    //第二个参数就是该类中的字符串常量    webview.addJavascriptInterface(m,"javaInterface");

js中调用native方法

function showToast(data) {    var json = {"data":data};    console.log("js调用Android Native方法："+json);    //javaInterface是上面所说的字符串映射对象    window.javaInterface.showToast(JSON.stringify(json));}

natvie中调用H5方法

在js中添加如下方法

//有参有返回值的方法function sum(a,b) {    return a+b;}//有参无返回值的方法function alertMessage(message) {    alert(message);}

在Native中调用对应的js方法

findViewById(R.id.native_call_js).setOnClickListener(new View.OnClickListener() {            @RequiresApi(api = Build.VERSION_CODES.KITKAT)            @Override            public void onClick(View v) {               //当出入变量名时，需要用转义符隔开                String content="hello js";                mWebView.loadUrl("javascript:alertMessage(\""   +content+   "\")"   );                //Android调用有返回值js方法，安卓4.4以上才能用这个方法                mWebView.evaluateJavascript("sum(1,2)", new ValueCallback() {                    @Override                    public void onReceiveValue(String value) {                        Log.d(TAG, "js返回的结果为=" + value);                        Toast.makeText(JsCallNativeActivity.this,"js返回的结果为=" + value,Toast.LENGTH_LONG).show();                    }                });            }        });

上面这种方式，但是这种方式是Android原生提供的并不适用于ios，也就是说，window.javaInterface.showToast(JSON.stringify(json))这样的js代码并不适用于ios，如果用以上的方法，就得分别为android和ios各写一套js代码。这样很显然是不太合理的，所以在实际开发中，如果涉及多终端使用，这种方式就不行了。

第二种H5调用Native方法

这种方法就是基于H5对应的点击事件发送一个url请求，并将所需的参数添加到该url中。android端通过webView.setWebViewClient()拦截url，解析url中携带的参数，并根据参数信息进行相应的操作。

webView.setWebViewClient(new WebViewClient() {            @Override            public boolean shouldOverrideUrlLoading(WebView view, String url) {                /**                 * 通过判断拦截到的url是否含有pre，来辨别是http请求还是调用android方法的请求                 */                String pre = "protocol://android";                if (!url.contains(pre)) {                    //该url是http请求，用webview加载url                    return false;                }else {                  //该url是调用android方法的请求，解析对应需要的参数然后调用对应的Native方法                  return true;               }            }        });

注意：
特别说明一下shouldOverrideUrlLoading()方法的返回值问题，该方法的返回值有三种：

返回true，即根据代码逻辑执行相应操作，webview不加载该url；
返回false，除执行相应代码外，webview加载该url；
返回super.shouldOverrideUrlLoading()，点进父类中，我们可以看到，返回的还是false。

一、利用JsBridge实现Native与H5的双向通信

二、Android系统H5调用原生的方式

第二种H5调用Native方法

更多相关文章

随机推荐