H5嵌入APP後，經過window.WebViewJavascriptBridge原生APP與H5之間交互

原生APP跳轉到H5頁面時，每每須要攜帶一些用戶信息，以前作法是在跳轉的地址中拼接H5頁面須要的參數，如今經過window.WebViewJavascriptBridge悄悄的進行數據交互。

下面從H5的角度記錄交互思路：

1：安卓環境和ios環境稍微有點不一樣，須要根據navigator.userAgent判斷一下當前環境

2：仍然是APP環境不一樣，安卓須要進行兼容性判斷，若是不存在window.WebViewJavascriptBridge變量，須要手動添加Dom的WebViewJavascriptBridgeReady事件監聽；
ios一樣須要判斷是否存在window.WebViewJavascriptBridge變量，若是不存在繼續判斷window.WVJBCallbacks變量，若是仍然不存在，則手動賦值爲H5回調，而後document.createElement('iframe')插入document中，隨即移除。

3：以上處理完成後，經過WebViewJavascriptBridge變量來註冊【事件】以便APP能監聽到並執行相應操做

4:3中須要對安卓系統進行init處理，若是是安卓系統，註冊事件以前須要先調用WebViewJavascriptBridge.init()

方法（注意： 一個頁面整個生命週期過程當中，只能進行一次init（）不然會報錯，個人作法是經過一個全局變量來判斷是否初始化過）

//針對安卓和ios系統，對window.WebViewJavascriptBridge進行兼容性處理
function setupWebViewJavascriptBridge(callback) {
	var u = navigator.userAgent;
	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
	var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
	if (isAndroid) {
		if (window.WebViewJavascriptBridge) {
			callback(WebViewJavascriptBridge)
		} else {
            //添加dom事件
			document.addEventListener(
				'WebViewJavascriptBridgeReady',
				function () {
					callback(WebViewJavascriptBridge)
				},
				false
			);
		}
			
	}
	if (isiOS) {
		console.log('isiOS')
		if (window.WebViewJavascriptBridge) {
			return callback(WebViewJavascriptBridge);
		}
		if (window.WVJBCallbacks) {
			return window.WVJBCallbacks.push(callback);
		}
		window.WVJBCallbacks = [callback];
		var WVJBIframe = document.createElement('iframe');
		WVJBIframe.style.display = 'none';
		WVJBIframe.src = 'https://__bridge_loaded__';
		document.documentElement.appendChild(WVJBIframe);
		setTimeout(function () {
			document.documentElement.removeChild(WVJBIframe)
		}, 0)
	}

}

//封裝方法，key:跟原生定義好的要捕獲的名稱， callback：原生捕獲後執行的回調，此處能夠寫H5的後續執行方法，params：對象，要傳給原生的參數
var setupWebViewBridge = function (key, callback, params) {
	setupWebViewJavascriptBridge(function (bridge) {
		var u = navigator.userAgent;
		var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
		var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
        //本身定義的全局變量，用來判斷當前頁面中安卓系統是否進行過一次初始化，頁面卸載時取消賦值
		if (!window.hadCalledWindow_WebViewJavascriptBridge ) {
			if (isAndroid) {
				window.hadCalledWindow_WebViewJavascriptBridge = true 
				bridge.init(function (message, responseCallback) {
					console.log('JS got a message', message);
					var data = {
						'Javascript Responds': '測試中文!'
					};
 
					if (responseCallback) {
						console.log('JS responding with', data);
						responseCallback(data);
					}
				});
			}
		}
		bridge.callHandler(
			key,
            //安卓系統必須傳一個參數，不然捕獲不到，所以，默認傳入一個_x_變量 
			JSON.stringify({
				...params,
				_x_: 1,
			}),
			callback
		);
 
	})
}

 

原生APP裏，註冊要捕獲的方法： 

bridge.registerHandler('jsbridge_showMessage', function (data, responseCallback) {
   showResponse(data);
});