查看: 620|回复: 0

[IOS开发教程] JS与原生App通讯 WebViewJavascriptBridge

发表于 2018-1-29 08:00:02

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

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

先看实例,后面有详细说明:

  1. // 定义
  2. function setupWebViewJavascriptBridge(callback) {
  3. if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
  4. if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
  5. window.WVJBCallbacks = [callback];
  6. var WVJBIframe = document.createElement('iframe');
  7. WVJBIframe.style.display = 'none';
  8. WVJBIframe.src = 'https://__bridge_loaded__';
  9. document.documentElement.appendChild(WVJBIframe);
  10. setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
  11. }
  12. // 使用
  13. setupWebViewJavascriptBridge(function(bridge) {
  14. // js注册方法给ObjC调用
  15. bridge.registerHandler('jsHandlerName', function(data, responseCallback) {
  16. // data为ObjC传递给JS的数据
  17. console.log("JS Echo called with:", data)
  18. // js返回数据给Objc
  19. responseCallback('返回一个字符串,告诉ObjC:我已收到数据data')
  20. })
  21. // js调用ObjC注册的方法
  22. var params = {'key':'value'} // 发送给ObjC的数据
  23. bridge.callHandler('ObjCHandlerName', params , function responseCallback(responseData) {
  24. // responseData ObjC返回的数据
  25. console.log("JS received response:", responseData)
  26. })
  27. })
复制代码

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

1. ObjC API 创建一个指定的webView
  1. [WebViewJavascriptBridge bridgeForWebView:webView];
复制代码
ObjC注册方法给JS调用 registerHandler

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

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

  1. // js通过getScreenHeight,向ObjC获取(要)屏幕高度
  2. [self.bridge registerHandler:@"getScreenHeight" handler:^(id data, WVJBResponseCallback responseCallback) {
  3. responseCallback([NSNumber numberWithInt:[UIScreen mainScreen].bounds.size.height]);
  4. }];
  5. // js通过log,向ObjC获取(要)日志
  6. [self.bridge registerHandler:@"log" handler:^(id data, WVJBResponseCallback responseCallback) {
  7. NSLog(@"Log: %@", data);
  8. }];
复制代码

ObjC调用JS的方法名 callHandler

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

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

JS注册方法给ObjC调用

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

  1. // JS通过showAlert,获取到ObjC的"Hi from ObjC to JS!"
  2. // 页面提示"Hi from ObjC to JS!"
  3. bridge.registerHandler("showAlert", function(data) {
  4. alert(data)
  5. })
  6. // JS通过getCurrentPageUrl将页面链接地址返回给ObjC
  7. // data为ObjC传递给JS的数据
  8. bridge.registerHandler("getCurrentPageUrl", function(data, responseCallback) {
  9. responseCallback(document.location.toString())
  10. })
复制代码
JS调用ObjC的方法
  1. bridge.callHandler("Log", "Foo")
  2. bridge.callHandler("getScreenHeight", null, function(response) {
  3. alert('Screen height:' + response)
  4. })
复制代码


回复

使用道具 举报