基於android混合開發的JsBridge技術學習

1、無JsBridge.

•       js如果要調用java(native、也說原生)方法:則java必須實現js接口供掛載在window對象上供js來執行。

         這裏簡單的可以只調用，調用後java端什麼也不做。複雜的調用可以是js調用了java端，然後java用loadUrl("javascript:")繼續調用js，這裏的調用可以是上一個js調用java的回調，也可以是一個純js，也可以是下一個js調用java。

•       java調用js就簡單多了,都是用的loadUrl("javascript:XXX")。這裏也可以在js串加入調用java作爲回調。
  

2、基於JsBridge

• java(native)調用js,方法還是loadUrl,但是jsbridge在這個基礎上封裝了下,封裝成了callHandler(String handlerName, String data, CallBackFunction callBack)
  
• js調用java就不用接口了，而是使用一個隱藏的iframe。通過變更src路徑，java端webview上攔截這個變更來實現js調用java.
  

       example:

webView.callHandler("functionInJs", "data from Java",
					new CallBackFunction() {

						@Override
						public void onCallBack(String data) {
							// TODO Auto-generated method stub
							Log.i(TAG, "reponse data from js " + data);
						}

					});

   這裏三個參數，第三個是作爲回調的，成功後會調用這個對象裏的onCallBack方法。

	public void callHandler(String handlerName, String data, CallBackFunction callBack) {
        doSend(handlerName, data, callBack);
	}

直接跳到doSend方法

private void doSend(String handlerName, String data, CallBackFunction responseCallback) {
		Message m = new Message();
		if (!TextUtils.isEmpty(data)) {
			m.setData(data);
		}
		if (responseCallback != null) {
			String callbackStr = String.format(BridgeUtil.CALLBACK_ID_FORMAT, ++uniqueId + (BridgeUtil.UNDERLINE_STR + SystemClock.currentThreadTimeMillis()));
			responseCallbacks.put(callbackStr, responseCallback); //responseCallbacks數組存回調對象
			m.setCallbackId(callbackStr);  //數據塞在message對象中
		}
		if (!TextUtils.isEmpty(handlerName)) {  //handler不爲空就把他設置給message對象
			m.setHandlerName(handlerName);
		}
		queueMessage(m);
	}

創建message對象並queueMessage處理,   回調對象入responseCallbacks(Map)

	private void queueMessage(Message m) {
		if (startupMessage != null) { //startupMessage不爲空的時候
			startupMessage.add(m);//message對象加入列表
		} else {
			dispatchMessage(m); //這裏派遣(發出)信息--向js
		}
	}

這裏startupMessage是否爲空呢？看這裏:

@Override
		public void onPageFinished(WebView view, String url) {
			super.onPageFinished(view, url);

			if (toLoadJs != null) {
				BridgeUtil.webViewLoadLocalJs(view, toLoadJs);
			}

			//
			if (startupMessage != null) {
				for (Message m : startupMessage) {
					dispatchMessage(m);
				}
				startupMessage = null;
			}
		}

這個方法是在webview加載完後執行，必然會把startupMessage置爲null,那麼到了

dispatchMessage這個方法...   英文意思是派遣消息,是？

	private void dispatchMessage(Message m) {
        String messageJson = m.toJson();
        //escape special characters for json string
        messageJson = messageJson.replaceAll("(\\\\)([^utrn])", "\\\\\\\\$1$2");
        messageJson = messageJson.replaceAll("(?<=[^\\\\])(\")", "\\\\\"");
       // JS_HANDLE_MESSAGE_FROM_JAVA=="javascript:WebViewJavascriptBridge._handleMessageFromNative('%s');"
       //javascriptCommand==javascript:WebViewJavascriptBridge._handleMessageFromNative('{\"data\":\"data from Java\",\"handlerName\":\"functionInJs\",\"callbackId\":\"JAVA_CB_3_2640\"}');
        String javascriptCommand = String.format(BridgeUtil.JS_HANDLE_MESSAGE_FROM_JAVA, messageJson);
        if (Thread.currentThread() == Looper.getMainLooper().getThread()) {
            this.loadUrl(javascriptCommand);  //java這裏主線程執行js
        }
    }

把message對象轉爲json處理，BridgeUtil裏面聲明瞭final static String JS_HANDLE_MESSAGE_FROM_JAVA = "javascript:WebViewJavascriptBridge._handleMessageFromNative('%s');"; 最終處理後需要loadUrl的字符串如上，我們可以知道最終會調用_handleMessageFromNative方法處理，並帶上json串：{\"data\":\"data from Java\",\"handlerName\":\"functionInJs\",\"callbackId\":\"JAVA_CB_3_2640\"}，現在來看這個js方法：

// 提供給native調用,receiveMessageQueue 在會在頁面加載完後賦值爲null,所以
	function _handleMessageFromNative(messageJSON) {
		if (receiveMessageQueue) {
			receiveMessageQueue.push(messageJSON);
		} else {
			_dispatchMessageFromNative(messageJSON);
		}
	}

作者提供的代碼說了，這個跟startMessage一樣,receiveMessageQueue會在頁面加載完後置爲null.繼續_dispatchMessageFromNative

// 提供給native使用,
	function _dispatchMessageFromNative(messageJSON) {  //native -doSend..後loadUrl(js這個方法)-獲取json數據
		setTimeout(function() {
			var message = JSON.parse(messageJSON);
			var responseCallback;
			// java call finished, now need to call js callback function
			if (message.responseId) {  //沒有responseId to else
				responseCallback = responseCallbacks[message.responseId];
				if (!responseCallback) {
					return;
				}
				responseCallback(message.responseData);
				delete responseCallbacks[message.responseId];
			} else {
				// 直接發送
				if (message.callbackId) {
					var callbackResponseId = message.callbackId;
					responseCallback = function(responseData) {
						_doSend({
							responseId : callbackResponseId, //響應javaId:JAVA_CB_3_2640
							responseData : responseData
						});
					};
				}

				var handler = WebViewJavascriptBridge._messageHandler;
				if (message.handlerName) {
					handler = messageHandlers[message.handlerName];//handler名是functionJs
				}
				// 查找指定handler
				try {
					handler(message.data, responseCallback);
				} catch (exception) {
					if (typeof console != 'undefined') {
						console
								.log(
										"WebViewJavascriptBridge: WARNING: javascript handler threw.",
										message, exception);
					}
				}
			}
		});
	}

上面的加了註釋不難理解，有2句解釋下：

handler = messageHandlers[message.handlerName];//handler名是functionJs

這裏jsbridge在啓動的時候有這段:

        bridge.registerHandler("functionInJs", function (data, responseCallback) {
            document.getElementById("show").innerHTML = ("data from Java: = " + data);
            var responseData = "Javascript Says Right back aka!";
            responseCallback(responseData);
        });

這裏會註冊這個functioinJs方法:所以上面獲得的是這裏定義的方法.所以後面的

handler(message.data, responseCallback);

data就是前面java裏面封裝的data,responseCallBack是上面的

responseCallback = function(responseData) {
						_doSend({
							responseId : callbackResponseId, //響應javaId:JAVA_CB_3_2640
							responseData : responseData
						});
					};

他是作爲數據在id爲show的div上顯示數據後要回調的方法。現在數據顯示出來了，我們知道了，這裏的responseId,responseData是上面的一個

 var responseData = "Javascript Says Right back aka!";

轉到_doSend方法:

	// sendMessage add message, 觸發native處理 sendMessage
	function _doSend(message, responseCallback) {
		if (responseCallback) {
			var callbackId = 'cb_' + (uniqueId++) + '_' + new Date().getTime();
			responseCallbacks[callbackId] = responseCallback;//這裏在js端存儲JAVA_CB_3_2640作爲js  callbackId的屬性
			message.callbackId = callbackId;//待發送的信息裏面存儲了一個剛纔生成的js  callbackId
		}

		sendMessageQueue.push(message); //把這個message放入sendMessageQueue數組中.
		messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://'
				+ QUEUE_HAS_MESSAGE;   //這裏變更iframe的src屬性,這樣會觸發Java端WebViewClient的shouldOverrideUrlLoading方法執行
	}

下面轉到shouldOverrideUrlLoading方法.

public boolean shouldOverrideUrlLoading(WebView view, String url) {
			try {
				url = URLDecoder.decode(url, "UTF-8");
			} catch (UnsupportedEncodingException e) {
				e.printStackTrace();
			}
			if (url.startsWith(BridgeUtil.YY_RETURN_DATA)) { // 如果是返回數據 _fetchQueue
				handlerReturnData(url);
				return true;
			} else if (url.startsWith(BridgeUtil.YY_OVERRIDE_SCHEMA)) { //第一次 _doSend/////
				flushMessageQueue();
				return true;
			} else {
				return super.shouldOverrideUrlLoading(view, url);
			}
		}

.........................