继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JS与原生App通讯 WebViewJavascriptBridge

Capricorncd
关注TA
已关注
手记 17
粉丝 9
获赞 164

项目中用到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)
})
打开App,阅读手记
7人推荐
发表评论
随时随地看视频慕课网APP