JsBridge是lzyzsd写的一款开源项目，开源地址：https://github.com/lzyzsd/JsBridge
下面对JsBridge的接入以及基本使用做一些简单介绍。

1.接入

工程build.gradle文件中配置

allprojects {
    repositories {
        // ...
        maven { url 'https://jitpack.io' }
    }
}

Module build.gradle文件中添加依赖

implementation 'com.github.lzyzsd:jsbridge:1.0.4'

2.Web调用Native

Activity中注册一个Handler，名称与js中定义的保持一致

        mBridgeWebView.setWebChromeClient(new WebChromeClient());
        mBridgeWebView.loadUrl("file:///android_asset/demo.html");

        mBridgeWebView.registerHandler("submitFromWeb", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                Log.d(TAG, "handler = submitFromWeb, data from web = " + data);
                function.onCallBack("submitFromWeb exe, response data from Java");
            }
        });

web代码，callNativeMethod()即为调用Java的代码块

<!DOCTYPE html>
<html lang="en">
<body>

    <div id="show"></div>

    <button type="button" onclick="callNativeMethod()">callNativeMethod</button>

    <script>

        <!-- js调用Java方法 -->

        function callNativeMethod() {

           <!-- 参数1 java中注册的handleName, 参数2 返回给Java的数据, 参数3 js 的处理逻辑 -->

           WebViewJavascriptBridge.callHandler(
                'submitFromWeb'
                , {'param': "I'm js data"}
                , function(responseData) {
                    document.getElementById("show").innerHTML = "get responseData from java, data = " + responseData;
                }
           );

        }


       <!-- Java调用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) {
                console.log('JS got a message', message);
                var data = {
                    'Javascript Responds': '测试中文!'
                };

                if (responseCallback) {
                    console.log('JS responding with', data);
                    responseCallback(data);
                }
            });

            bridge.registerHandler("functionInJs", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("data from Java: = " + data);
                if (responseCallback) {
                    var responseData = "Javascript Says Right back aka!";
                    responseCallback(responseData);
                }
            });
       })

    </script>
</body>
</html>

运行结果：Java收到js的请求参数，并将结果返回给js。

Java: 收到js的请求参数

// 运行结果：js调用Java方法，并将数据传给Java
2019-12-21 11:10:46.136 15833-15833/com.example.webdemo D/BridgeActivityTag: handler = submitFromWeb, data from web = {"param":"I'm js data"}

js: 收到了来自Java的返回结果
在这里插入图片描述

3.Native调用Web

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.btn_call_js:
                callJsMethod();
                break;
            default:
                break;
        }
    }

    private void callJsMethod() {
        mBridgeWebView.callHandler("functionInJs", "我是Java数据", new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                Log.d(TAG, "onCallBack:" + data);
            }
        });
    }

运行结果：js收到Java的请求参数, 并将结果返回给Java。

js: 收到Java的请求参数
在这里插入图片描述
Java: 收到js的返回结果

// Java收到js的返回数据
2019-12-21 11:17:03.023 16747-16747/com.example.webdemo D/BridgeActivityTag: onCallBack:Javascript Says Right back aka!

demo地址
git@github.com:justinworkshop/WebDemo.git

来源：CSDN

作者：wei.zheng

链接：https://blog.csdn.net/qq_37514242/article/details/103639682

标签

js代码

通信

data

2.Native与Web通信（下）：使用JsBridge

1.接入

2.Web调用Native

3.Native调用Web