混合开发webviewjavascriptbridge插件实现web与原生的交互

首先来看下web，ios，android 进行交互原理：

1.web调用ios，android

发送一个假请求，让原生开发拦截

原生可以写一个方法，实现一个拦截请求的方法， 拦截的不仅仅是ajax，还可以是文件请求，herf请求

eg：<a href="emma:openweixin">打开微信</a> 或者 window.location.href = ...... 原生拦截到url，解析字符串，做出相应的操作 emma这是与原生协商好的开头,可以为约定任何字符串

一般会出现一个确认框，是原生写的

2.ios、android调用web网页

1.web设置一个回调方法，函数，挂载window上面。

window.onCaptureImageCallback = (value)=>{
    ....
}

当原生需要传值给网页时，向打开网页的窗口动态插入js代码， 调用web设置的回调方法，将数据以参数的形式传递，web就获取到了数据

使用插件实现web，ios，android 进行交互

插件 webviewjavascriptbridge 此插件分为两种 一个是ios 一个是android

原生向bridge注册事件，web这边去调用，复制插件的一段代码放在index.html中

function setupWebViewJavascriptBridge(callback) {
	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)
}

事件触发了，执行插件的一段代码，代码中调用原生写在bridge中的代码 所以得知道了，原生注册的事件名。

setupWebViewJavascriptBridge(function(bridge) {

    //这里是web注册事件，提供给原生调用
    bridge.registerHandler('注册的事件名', function(data, responseCallback) {
    	console.log("JS Echo called with:", data)
    	responseCallback(data//传给原生的数据)
    })
    //这里是web调用原生注册的事件
    bridge.callHandler('调用的事件名', {'key':'value'传的参数}, function responseCallback(responseData原生给到web的数据) {
    	console.log("JS received response:", responseData)
    })
})