Android JSBridge实现与前端的交互

自白：H5，JavaScript从未接触过，有一定的Android基础

目的：一张图，解放自己的记忆~深入的知识很多大牛已经总结过啦

前记：刚接触Android与前端的交互，一直不明白具体原理是啥米，看着别人熟练的开发着总觉得特别高深似的（貌似每次没接触过的东西，都觉得别人特别牛，有木有~）。今天狠狠心，看了看区长的博客，茅塞顿开，总结了一下区长大人的文章和示例，感谢区长大人~这是区长大人的牛逼博客地址：http://blog.csdn.net/sbsujjbcy/article/details/50752595，里面有详细的代码和原理解析

内容：我脑子总是不好使，超级羡慕那些说“只要理解了就不可能忘记”的牛逼人士，谁让我的脑袋只有芝麻大小，还是找找自己的理解记忆方式吧~

上图和示例吧~

示例：

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

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();
        }
    }
}

完整的流程就顺利的串起来啦，发现其实要简单串起来也没那么难对不对，以后再慢慢研究其中的奥妙吧~

欢迎大家沟通交流，如有错误也欢迎指正~