JS与原生App通讯 WebViewJavascriptBridge-原创手记-慕课网

项目中用到JS与原生App之间的数据通信，IOS那边提供了一个WebViewJavascriptBridge，故‘研究‘了一下。

github地址： https://github.com/marcuswestin/WebViewJavascriptBridge

先看实例，后面有详细说明：

// 定义
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)
}

// 使用
setupWebViewJavascriptBridge(function(bridge) {
    // js注册方法给ObjC调用
    bridge.registerHandler('jsHandlerName', function(data, responseCallback) {
        // data为ObjC传递给JS的数据
        console.log("JS Echo called with:", data)
        // js返回数据给Objc
        responseCallback('返回一个字符串，告诉ObjC：我已收到数据data')
    })

    // js调用ObjC注册的方法
    var params = {'key':'value'} // 发送给ObjC的数据
    bridge.callHandler('ObjCHandlerName', params , function responseCallback(responseData) {
        // responseData ObjC返回的数据
        console.log("JS received response:", responseData)
    })
})

按照自己的理解翻译了一下：

1. ObjC API

创建一个指定的webView

[WebViewJavascriptBridge bridgeForWebView:webView];

ObjC注册方法给JS调用 registerHandler

[bridge registerHandler:(NSString*)handlerName handler:(WVJBHandler)handler]

注册一个方法名handleName，JS可用通过bridge.callHandler("handlerName")调用。比如：

// js通过getScreenHeight，向ObjC获取（要）屏幕高度
[self.bridge registerHandler:@"getScreenHeight" handler:^(id data, WVJBResponseCallback responseCallback) {
    responseCallback([NSNumber numberWithInt:[UIScreen mainScreen].bounds.size.height]);
}];
// js通过log，向ObjC获取（要）日志
[self.bridge registerHandler:@"log" handler:^(id data, WVJBResponseCallback responseCallback) {
    NSLog(@"Log: %@", data);
}];

ObjC调用JS的方法名 callHandler

调用JS的方法HandlerName，如果responseCallback是一个指定的JS方法则能响应。

// 当js通过showAlert请求时，可以拿到数据"Hi from ObjC to JS!"
[self.bridge callHandler:@"showAlert" data:@"Hi from ObjC to JS!"];
// Objc通过getCurrentPageUrl让JS返回页面链接地址
// ObjC可以通过data向JS传输数据
// ObjC需要JS响应，则需配置responseCallback
[self.bridge callHandler:@"getCurrentPageUrl" data:nil responseCallback:^(id responseData) {
    NSLog(@"Current UIWebView page URL is: %@", responseData);
}];

2. Javascript API

JS注册方法给ObjC调用

注册一个方法名handlerName。ObjC用[bridge callHandler:"handlerName" data:@"Foo"] 和 [bridge callHandler:"handlerName" data:@"Foo" responseCallback:^(id responseData) { ... }]可以调用。

// JS通过showAlert，获取到ObjC的"Hi from ObjC to JS!"
// 页面提示"Hi from ObjC to JS!"
bridge.registerHandler("showAlert", function(data) { 
    alert(data) 
})
// JS通过getCurrentPageUrl将页面链接地址返回给ObjC
// data为ObjC传递给JS的数据
bridge.registerHandler("getCurrentPageUrl", function(data, responseCallback) {
    responseCallback(document.location.toString())
})

JS调用ObjC的方法

bridge.callHandler("Log", "Foo")
bridge.callHandler("getScreenHeight", null, function(response) {
    alert('Screen height:' + response)
})

JS与原生App通讯 WebViewJavascriptBridge原创