采用WebViewBridge做完原生WebView与JS的交互桥梁，下面是相关框架地址：
Android：https://github.com/gzsll/WebViewJavascriptBridge
IOS：https://github.com/marcuswestin/WebViewJavascriptBridge
交互机制和过程如下：
App注册NativeHandler
在原生应用打开WebView页面时，利用WebViewJavascriptBridge注册一个Handler（做完js调用java的方法处理器），目前定义为NativeHandler
android：
webView.registerHandler("NativeHandler",newWVJBWebView.WVJBHandler() {callback.callback("Response from testJavaCallback!");} );
ios：
[self.bridgeregisterHandler:@"NativeHandler"handler:^(iddata, WVJBResponseCallback responseCallback) {responseCallback(data);}];
JS注册JSHandler
页面加载时，进行注册JSHandler
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 = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
setupWebViewJavascriptBridge(function(bridge) {
/* Initialize your app here */
bridge.registerHandler('JSHandler', function(data, responseCallback) {
console.log("JS called with:", data)
responseCallback(data)
})
})
App调用JS，数据通过json传递
android：
webView.callHandler("JSHandler","{"foo":"before ready"}",newWVJBWebView.WVJBResponseCallback() {});
ios：
[self.bridgecallHandler:@"JSHandler"data:nilresponseCallback:^(idresponseData) {NSLog(@"ObjC received response:%@", responseData);}];
JS调用App，数据通过json传递
bridge.callHandler('NativeHandler', {'key':'value'}, function responseCallback(responseData) {
console.log("JS received response:", responseData)
})
JSON数据传递初步定义
{
"type":"",
"code":0,
"result":{}
}
数据体包括3部分，第一部分为操作事件字符串，现定义以下事件：
返回到上一级原生页面，back
跳转到原生指定页面，toNativePage
获取当前用户是否登录，isLogin
获取当前用户信息，getLoginUserInfo
获取定位的地理位置，getLoc
等等
第二部分为操作码，0为成功，1为失败，其他待确定
第三部分为获取数据的对象实体，有可能是list，也可能是object
网友评论