首先来看下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)
})
})