自白：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 onclick="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, "");
},

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

完整的流程就順利的串起來啦，發現其實要簡單串起來也沒那麼難對不對，以後再慢慢研究其中的奧妙吧~

歡迎大家溝通交流，如有錯誤也歡迎指正~