JS与App WebView交互

2017-09-29  本文已影响0人  SimpleRRR

采用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

上一篇下一篇

猜你喜欢

热点阅读