利用jsBridge实现H5与原生通信分别给出H5侧和原生侧的具体代码

H5侧代码：

引入jsBridge

<script src="jsBridge.js"></script>

发送消息给原生

if (window.WebViewJavascriptBridge) {
  window.WebViewJavascriptBridge.callHandler('methodName', data, function(responseData) {
    console.log(responseData);
  });
} else {
  document.addEventListener('WebViewJavascriptBridgeReady', function() {
    window.WebViewJavascriptBridge.callHandler('methodName', data, function(responseData) {
      console.log(responseData);
    });
  }, false);
}

接收原生消息

if (window.WebViewJavascriptBridge) {
  window.WebViewJavascriptBridge.registerHandler('methodName', function(data, responseCallback) {
    console.log(data);
    responseCallback('response data');
  });
} else {
  document.addEventListener('WebViewJavascriptBridgeReady', function() {
    window.WebViewJavascriptBridge.registerHandler('methodName', function(data, responseCallback) {
      console.log(data);
      responseCallback('response data');
    });
  }, false);
}

原生侧代码：

注册jsBridge

WebView webView = findViewById(R.id.web_view);
WebViewJavascriptBridge.enableLogging();
WebViewJavascriptBridge bridge = new WebViewJavascriptBridge(webView, new MyJavascriptInterface());
bridge.registerHandler("methodName", new BridgeHandler() {
    @Override
    public void handler(String data, CallbackFunction callback) {
        Log.i(TAG, "接收到H5发送的消息：" + data);
        callback.onCallback("response data");
    }
});

发送消息给H5

bridge.callHandler("methodName", data, new CallbackFunction() {
    @Override
    public void onCallback(String responseData) {
        Log.i(TAG, "接收到H5返回的消息：" + responseData);
    }
});

实现MyJavascriptInterface

public class MyJavascriptInterface {
    @JavascriptInterface
    public void onBridgeReady() {
        Log.i(TAG, "jsBridge已经准备好");
    }
}
``