Android JSBridge实现与前端的交互

示例：

结合图形的步骤标号逻辑，我们来给出示例进行分析：

1.必须先确定Url的具体格式，是为了统一前端与Android的互相调用，也就是干活前先得签订一个协议。参考http制定的协议为：jsbridge://className:port/methodName?jsonObj

解释一下：1）className：Android端实现暴露给前端的类名；2）port：Android返回结果给前端的端口；

3）methodName：前端需要调用的函数 ；4）前端给Android传递的参数，这里传递的是一个json对象

2.好了，下面正式的开始干活了，HTML文件命名为index.html,有一个click事件的界面，触发点击事件

<button οnclick="JSBridge.call('bridge','showToast',{'msg':'Hello JSBridge'},function(res){alert(JSON.stringify(res))})">
    测试showToast
</button>

3.JavaScript文件命名为JSBridge.js, 第2步中的JSBridge.call即为调用JSBridge.js中的call方法，后面带了四个参数

call: function (obj, method, params, callback) {
    console.log(obj+" "+method+" "+params+" "+callback);
    var port = Util.getPort();
    console.log(port);
    this.callbacks[port] = callback;
    var uri=Util.getUri(obj,method,params,port);
    console.log(uri);
    window.prompt(uri, "");
},

JSBridge.js中的call方法，最后调用了window.prompt方法，这个方法就是触发Android端webChromeClient的回调函数用的

4.window.prompt触发了WebChromeClient（这个需要使用函数WebView.setWebChromeClient(new WebChromeClietn())进行设定）

类中的如下回调onJsPrompt。太棒了，这个时候就完成了前端与Android端的通信了，因为前端的信息都顺利

通过这个函数传递给Android了。

@Override
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
    result.confirm(JSBridge.callJava(view,message));
    return true;
}

5.Android中会定义一个类JSBridge.Java来管理暴露给前端使用的函数。这个类有两个功能：1）暴露给前端的函数的动态注册功能。

2）解析前端信息，调用了Android端对应的函数，这个示例中是：showToast函数

解析前端的信息，获取前端调用的函数名：

Uri uri = Uri.parse(uriString);
className = uri.getHost();
param = uri.getQuery();
port = uri.getPort() + "";
String path = uri.getPath();

HashMap< String, Method> methodHashMap = exposedMethod.get(className);

Method method = methodHashMap.get(methodName);

通过获取的函数名，这里是showToast，调用Android端的showToast函数

method.invoke(null,webView,new JSONObject(param),new Callback(webView,port));//

6.定义类BridgeImpl.java来具体的实现暴露给前端的所有函数。这里的showToast函数如下

public static void showToast(WebView webView, JSONObject param, final JSBridge.Callback callback){
    String message = param.optString("msg");
    Toast.makeText(webView.getContext(),message,Toast.LENGTH_LONG).show();
    if(null != callback){
        try {
            JSONObject object = new JSONObject();
            object.put("key","value");
            object.put("key1","vaule1");
            callback.apply(getJSONObject(0,"ok",object));
        }catch (Exception e){
            e.printStackTrace();
        }
    }
}