项目需要，在vuejs开发的web项目中与APP进行通信，实现原理和cordova一致。使用WebViewJavascriptBridge。
其实也是通过拦截url scheme，支持ios6往前的系统
iOS与H5交互的方案
纵观所有iOS与H5交互的方案，有以下几种：
- 第一种：有很多的app直接使用在webview的代理中通过拦截的方式与native进行交互，通常是通过拦截url scheme判断是否是我们需要拦截处理的url及其所对应的要处理的功能是什么。任意版本都支持。
- 第二种：iOS7之后出了JavaScriptCore.framework用于与JS交互，但是不支持iOS6，对于还需要支持iOS6的app，就不能考虑这个了。
- 第三种：WebViewJavascriptBridge开源库使用，本质上，它也是通过webview的代理拦截scheme，然后注入相应的JS。
- 第四种：react-native
/**
* 函数描述：js调用webview事件
*
* jsBridge.callHandler(method, data, callBack(response));
* @param method {string} 方法名
* @param data {Object} 参数
* @return {Object} 回调
*/ /**
* 函数描述：webView调用JS事件
*
* jsBridge.registerHandler(method, callBack(response));
* @param method {string} 方法名
* @return {Object} 回调
*/ var JsBridge = {
init: function(callback) {
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (!isiOS) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady',
function() {
callback(WebViewJavascriptBridge)
},
false
);
}
} else {
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 = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() {
document.documentElement.removeChild(WVJBIframe)
}, 0)
}
}, first: function() {
var u = navigator.userAgent;
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (!isiOS) {
var _this = this;
_this.init(function(bridge) {
bridge.init(function(message, responseCallback) {
responseCallback(data);
})
})
}
}, registerHandler: function(name, fun) {
var _this = this;
_this.init(function(bridge) {
bridge.registerHandler(name, fun);
})
}, callHandler: function(name, data, fun) {
var _this = this;
_this.init(function(bridge) {
bridge.callHandler(name, data, fun);
})
}
} JsBridge.first(); export {
JsBridge
};