Android JsBridge

为了提高客户端的开发效率以及手机对h5技术的支持好不够完美，hybird技术被推上了历史舞台。它的基本原理是使用前端的技术(html/css/js)进行开发，以达到Native的体验，其间最重要的一环就是js和Native的交互。如微信提供的jsSDk，可以实现js调用Native中定位、支付等技术。本文介绍如何实现js和Native的通信。

js调用Android

js调用Android的方法有以下四种：

1. WebView的JavascriptInterface
2. WebViewClient.shouldOverrideUrlLoading()
3. WebChromeClient.onConsoleMessage()
4. WebChromeClient.onJsPrompt()

1. JavascriptInterface

JavascriptInterface是Android官方提供的工js和Native通信方案。其实现如下：

1. 实现一个java类，供js调用

public class JavascriptInterface {
    @JavascriptInterface
    public void showToast(String toast) {             
       Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show();
    }
}

2. 在webView中注册这个类：

  webView.addJavascriptInterface(new JavascriptInterface(), "javascriptInterface");

3. 在js中直接调用这个接口：

  function showToast(text){
    window.javascriptInterface.showToast(text);
  }

但是webView有个安全漏洞：WebView中接口隐患与手机挂马利用。 在Android4.2后，这个漏洞被修复；但是考虑到兼容性的问题，这个方案基本不被采用。

2. WebViewClient.shouldOverrideUrlLoading()

这个方法是拦截所有webView的跳转，页面可以构造一个特殊格式的Url跳转，shouldOverrideUrlLoading拦截Url后判断其格式，然后Native就能执行自身的逻辑了。

  public class CustomWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
      if (isJsBridgeUrl(url)) {
        // JSbridge的处理逻辑
        return true;
      }
      return super.shouldOverrideUrlLoading(view, url);
    }
  }

3. WebChromeClient.onConsoleMessage()

在js中执行console.log(), 会进入Android的WebChromeClient.consoleMessage()回调。

  public class CustomWebChromeClient extends WebChromeClient {
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
      super.onConsoleMessage(consoleMessage);
      String msg = consoleMessage.message();//Javascript输入的Log内容
    }
  }

4. WebChromeClient.onJsPrompt()

和3类似，在js中执行alert、confirm和prompt这三个方法时，会进入Android的onJsAlert、onJsConfirm和onJsPrompt回调。 由于prompt的使用频率较低，因此通常采用prompt实现js和Native的通信。

Android调用js

Android调用js接口的方法只有一个：WebView.loadUrl():

 webView.loadUrl('javascript: ' + ...);

实践

结合android-js-bridge这个例子，来一个简单的实现：

1. 设计schema

和网站的http协议一样，约定一个js和Android的通信协议，如：

  jsbridge://className:callbackAddress/methodName?jsonObj

  // className: 表示java的类名
  // callbackAddress： js回调的标识
  // methodName： java中的方法名
  // jsonObj： 接口数据

2. 在js中，可以采用如下方法调用java方法

  var JSBridge = {
    call: function(className, method, params, callback){
      var uri = 'JSBridge://' + className + ':' + callback + '/' + method + '?' + params;
      window.prompt(uri, "");
    }
  }

  // 下面会调用java中的 bridge.showToast方法
  JSBridge.call('bridge','showToast',{'msg':'Hello JSBridge'},function(res){alert(JSON.stringify(res))})

3. 在java中， 可以如下实现：

  // 进入prompt回调
  public class JSBridgeWebChromeClient extends WebChromeClient {      
    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {            
      result.confirm(JSBridge.callJava(view, message));
      return true;
    }
  }

  // 调用java逻辑
  public class JSBridge {
    ...
    public static String callJava(WebView webView, String uriString) {
        String methodName = "";
        String className = "";
        String param = "{}";
        String port = "";
        if (!TextUtils.isEmpty(uriString) && uriString.startsWith("JSBridge")) {
            Uri uri = Uri.parse(uriString);
            className = uri.getHost();
            param = uri.getQuery();
            port = uri.getPort() + "";
            String path = uri.getPath();
            if (!TextUtils.isEmpty(path)) {
                methodName = path.replace("/", "");
            }
        }

        // 基于上面的className、methodName和port path调用对应类的方法
        if (exposedMethods.containsKey(className)) {
            HashMap methodHashMap = exposedMethods.get(className);

            if (methodHashMap != null && methodHashMap.size() != 0 && methodHashMap.containsKey(methodName)) {
                Method method = methodHashMap.get(methodName);
                if (method != null) {
                    try {
                        method.invoke(null, webView, new JSONObject(param), new Callback(webView, port));
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
            }
        }
        return null;
    }
}

  // 直接进入showToast函数的实现
  public static void showToast(WebView webView, JSONObject param, final Callback callback) {
    String message = param.optString("msg");
    Toast.makeText(webView.getContext(), message, Toast.LENGTH_SHORT).show();
    if (null != callback) {
        try {
            JSONObject object = new JSONObject();
            object.put("key", "value");
            object.put("key1", "value1");
            callback.apply(getJSONObject(0, "ok", object));
        } catch (Exception e) {
            e.printStackTrace();
        }
     }
  }

  // 上述程序的callback.apply方法实现如下： 即通过webView.loadUrl实现java调用js的方法
  public class Callback {
    private static Handler mHandler = new Handler(Looper.getMainLooper());
    private static final String CALLBACK_JS_FORMAT = "javascript:JSBridge.onFinish('%s', %s);";
    private String mPort;
    private WeakReference mWebViewRef;

    public Callback(WebView view, String port) {
        mWebViewRef = new WeakReference<>(view);
        mPort = port;
    }

    public void apply(JSONObject jsonObject) {
        final String execJs = String.format(CALLBACK_JS_FORMAT, mPort, String.valueOf(jsonObject));
        if (mWebViewRef != null && mWebViewRef.get() != null) {
            mHandler.post(new Runnable() {
                @Override
                public void run() {
                    mWebViewRef.get().loadUrl(execJs);
                }
            });

        }

    }
}

参考文章：

1. JsBridge实现Javascript和Java的互相调用
2. Android JSBridge的原理与实现
3. lzyzsd/JsBridge
4. pedant/safe-java-js-webview-bridge