JS与App WebView交互
采用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