UDN-企业互联网技术人气社区

板块导航

浏览  : 1050
回复  : 8

[原生js] WebViewJavaScriptBridge的使用

[复制链接]
htmlman的头像 楼主
发表于 2017-1-10 15:23:59 | 显示全部楼层 |阅读模式
  前言

  目前大部分的APP或多或少都会嵌入HTML界面,这时候就需要Obj-C跟JavaScript进行交互了。下面给大家介绍一下一个比较流行的开源交互框架,这个框架实现了在UIWebView和WKWebView下Obj-C和JavaScript之间的交互。

  原理

  关于其实现的原理其实我也理解的不是很透彻,只知道它还是基于之前的Obj-C与JavaScript交互的老方法:JS调用Obj-C是通过对webview的请求进行拦截,然后决定是进行网页界面跳转还是调Obj-C本地方法。具体可以看下我这篇文章

  使用

  一.准备工作:前往github 下载源代码

  可手动拖入工程,也支持cocoapod,我现在用的是V5.0.5版本,里面文件如下
1.png

  源文件

  二.具体使用

  1.导入头文件,并声明一个WebViewJavaScriptBridge对象。
  1. #import <WKWebViewJavaScriptBridge.h>
  2. @property (nonatomic, strong) WebViewJavaScriptBridge* bridge;
复制代码

  2.创建一个WebView,并用WebViewJavaScriptBridge对象绑定这个Webview,在控制器中遵守UIWebViewDelegate。
  1. #pragma mark - Lazy
  2. - (UIWebView *)webView {
  3. if(_webView == nil) {
  4.   _webView = [[UIWebView alloc] init];
  5.         [self.view addSubview:_webView];
  6.         _webView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);
  7.         NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"ExampleApp" ofType:@"html"];
  8.         NSString* appHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
  9.         NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
  10.         [_webView loadHTMLString:appHtml baseURL:baseURL];
  11. }
  12. return _webView;
  13. }

  14. - (WebViewJavaScriptBridge *)bridge {
  15. if(_bridge == nil) {
  16.   _bridge = [[WebViewJavaScriptBridge alloc] init];
  17.         //[WebViewJavaScriptBridge enableLogging];
  18.         _bridge = [WebViewJavaScriptBridge bridgeForWebView:self.webView];
  19.         [_bridge setWebViewDelegate:self];
  20. }
  21. return _bridge;
  22. }
复制代码

  3.JS端的配置工作

  下面这个方法是必须添加的
  1. <script>   
  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 = 'wvjbscheme://__BRIDGE_LOADED__';
  9.         document.documentElement.appendChild(WVJBIframe);
  10.         setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
  11.     }
  12. </script>
复制代码

  4.Obj-C调用JS

  在需要进行交互的界面中由JS注册方法供Obj-C调用
  1. setupWebViewJavaScriptBridge(function(bridge) {
  2.     bridge.registerHandler('ObjCCallJS', function(data, responseCallback){ console.log("JS Received:", data) responseCallback(data)
  3. })
  4. })
复制代码

  Obj-C主动去调用JS方法
  1. //不传参
  2.     [self.bridge callHandler:@"ObjCCallJS"];
  3.     //传参数
  4.     [self.bridge callHandler:@"ObjCCallJS" data:@{@"key":@"value"}];
  5.     //传参数并接收JS回调内容
  6.     [self.bridge callHandler:@"ObjCCallJS" data:@{@"key":@"value"} responseCallback:^(id responseData) {
  7.         //data:你传给JS的内容
  8.         //responseData:JS被Obj-C调用后,回调给Obj-C的内容
  9.     }];
复制代码

  5.JS调用Obj-C

  Obj-C注册方法供JS调用
  1. //请求打电话
  2.     [self.bridge registerHandler:@"callNativeCall" handler:^(id data, WVJBResponseCallback responseCallback) {
  3.         NSMutableString * telstr=[[NSMutableString alloc] initWithFormat:@"telprompt://%@",data[@"tel"]];
  4.         [[UIApplication sharedApplication] openURL:[NSURL URLWithString:telstr]];
  5.     }];
复制代码

  JS主动去调用Obj-C注册好的方法
  1. setupWebViewJavaScriptBridge(function(bridge) {
  2.     bridge.callHandler('callNativeCall', {'tel': '18942325686'}, function(response) {
  3.     alert('JSGetResponse:' + response)            
  4.        })
  5. })
复制代码

  总结:不管是Obj-C调用JS还是JS调用Obj-C 双方都可以选择是否传参,是否进行回调。

相关帖子

发表于 2017-1-10 15:24:30 来自手机 | 显示全部楼层
js太强大了,好多工作前端都可以做了…
使用道具 举报

回复

发表于 2017-1-10 15:24:30 | 显示全部楼层
jq现在应该算是最火的js框架类了吧?确实很强大extjs基于Yahoo UI的扩展,界面布局和效果方面很给力,但就是有点复杂
使用道具 举报

回复

发表于 2017-1-10 15:24:31 | 显示全部楼层
经常看到”htmlman“发帖,辛苦了
使用道具 举报

回复

发表于 2017-1-10 15:24:31 | 显示全部楼层
OMG!介是啥东东
使用道具 举报

回复

发表于 2017-1-10 15:24:31 | 显示全部楼层
貌似看过类似的文章恩,排版更清晰点就更好了
使用道具 举报

回复

发表于 2017-1-10 15:24:32 | 显示全部楼层
还是挺有借鉴意义的
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部