Android-JsBridge实现本地H5混合开发

Android JsBridge 混合开发框架

0x01 Java 调用 Js

我们知道，native层调用h5，在WebView中，如果java要调用js的方法，

0x0101 loadUrl <4.4

Android4.4以前使用WebView.loadUrl("javascript:function()")。

0x0102 evaluateJavascript >4.4

Android4.4以后，使用以下方式

webView.evaluateJavascript("javascript:function()", new ValueCallback<String>() {
  @Override
  public void onReceiveValue(String value) {
    Toast.makeText(MainActivity.this, "onReceiveValue From JS: " + value, Toast.LENGTH_SHORT).show();
  }
});

0x02 Js 调用 Java

h5层如何调native，有以下几种形式

0x0201 addJavascriptInterface >4.2

在4.2之前有安全隐患，JS可以动态获取到整个底层的实例信息，漏洞已经在Android 4.2上修复了，即使用@JavascriptInterface注解。

0x0202 shouldOverrideUrlLoading拦截自定义scheme

0x0203 onJsAlert,onJsConfirm,onJsPrompt

WebChromeClient对象中有三个方法，分别是onJsAlert,onJsConfirm,onJsPrompt，当js调用window对象的alert，confirm，prompt，WebChromeClient对象中的三个方法对应的就会被触发，进行拦截处理。

推荐使用onJsPrompt，使用频次最少，支持返回值。

override fun onJsPrompt(
  view: WebView?,
  url: String?,
  message: String?,
  defaultValue: String?,
  result: JsPromptResult?
): Boolean {
  val msg = handleMessage(message)
  result?.confirm("Java 处理之后的 Json 数据：$msg")
  return true
}

0x0204 onConsoleMessage

这是Android提供给Js调试在Native代码里面打印日志信息的API，同时这也成了其中一种Js与Native代码通信的方法。在Js代码中调用console.log(‘xxx’)方法。

0x03 自定义通信协议

jsbridge://className:callbackId/methodName?json

假设我们需要调用native层的Logger类的log方法，参数是msg，执行完成后js层要有一个回调，那么地址就如下

jsbridge://Logger:callbackId/log?{"msg":"message from js."}