[iOS] 使用WebViewJavascriptBridge实现OC与JS交互
2016-05-24 00:00
766 查看
摘要: [iOS] 使用WebViewJavascriptBridge实现OC与JS交互
因此今天为大家介绍一个优秀的开源小项目,就是我们今天的主角--
当然,有很多优秀的开发者写过
解压缩包,将
1.png
在需要使用
加载UIWebView,遵守<UIWebViewDelegate>协议
JS调用OC
什么是JS调用OC?
举个例子来说就是在网页中有一个登录按钮,点击登录按钮后,具体的登录功能是由OC端实现的,即登录功能实现需要我们在工程里有一个类似loginMethod的函数去具体操作。
工作流程
站在实际开发的角度来解释,就是假如现在有一个网页,在网页中有个登录按钮需要通过JS调OC的方式实现。那么我们首先需要跟负责网页编码的人员(一般是后台)商定出一个方法名称,也就是给这个登录按钮点击事件取个名字,例如叫loginCallBack。然后我们需要在代码里注册这个事件并负责它的具体实现。当用户点击这个登录按钮的时候,后台就会通知给这个事件的注册者去执行,有点像block的执行顺序。
代码实现
假如我们现在商定了一个事件名称为loginFunc,我们来看一下代码实现。
OC调用JS
什么是OC调用JS
如果你理解了JS调用OC,那么OC调用JS就应该差不多懂了。同样举个例子,我们的原生APP上有个输入框,我们输入完成后,让它显示在网页上面的用户名处。这样,我们就是OC要实现的一个事件让网页去真正实现了,也就是OC调用JS。
OC调用JS
和JS调用OC的流程大致一样,还是需要和网页编写人员商定出一个事件名,然后在网页里面先把注册这样一个事件并把实现体写好,等到我们OC去触发这个事件(比如点击按钮)就会去网页里面找到这个事件的实现体并执行。
代码实现
假如我们现在商定了一个注册事件,事件名称为registerFunc,我
们来代码实现一下
发送消息
概述
我们可以单纯地向JS发送数据,比如我们可以在网页加载完成后向网页发送一条加载完成的消息,或者传一个标题。
代码实现
大家可去gitHub下载demo查看源码。
文/陈向阳哈(简书作者)
原文链接:http://www.jianshu.com/p/ca496cb680fe
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
前言
当下,很多APP里面都会有HTML5网页,我们除了简单的用WebView加载显示外,很多情况下,我们还需要和WebView进行交互,比如点击WebView上面的按钮调用OC端的函数实现具体操作。
因此今天为大家介绍一个优秀的开源小项目,就是我们今天的主角--
WebViewJavascriptBridge。它主要帮助我们优雅的实现OC与JS的交互,非常方便简洁。
当然,有很多优秀的开发者写过
WebViewJavascriptBridge的使用包括实现原理,首先表示感激和敬意。但是作为一个初学者或者一个急于实现功能的人来说,大部分时候我们更希望一个直奔主题的文章。所以,本文的核心就是
WebViewJavascriptBridge在实际开发中的使用。
使用步骤
去Github上下载WebJavaScriptBridge
解压缩包,将
WebViewJavascriptBridge文件夹拖到你的工程中
1.png
在需要使用
WebViewJavascriptBridge的类文件中引入头文件
WebViewJavascriptBridge.h
加载UIWebView,遵守<UIWebViewDelegate>协议
具体使用
创建并初始化WebJavaScriptBridge实例
#import "ExampleUIWebViewController.h" #import "WebViewJavascriptBridge.h" @interface ExampleUIWebViewController () //声明`WebViewJavascriptBridge`对象为属性 @property WebViewJavascriptBridge* bridge; @end - (void)viewWillAppear:(BOOL)animated { //用UIWebView加载web UIWebView* webView = [[UIWebView alloc] initWithFrame:self.view.bounds]; //设置能够进行桥接 [WebViewJavascriptBridge enableLogging]; // 初始化*WebViewJavascriptBridge*实例,设置代理,进行桥接 _bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) { NSLog(@"ObjC received message from JS: %@", data); responseCallback(@"Response for message from ObjC"); }]; }
JS调用OC
什么是JS调用OC?
举个例子来说就是在网页中有一个登录按钮,点击登录按钮后,具体的登录功能是由OC端实现的,即登录功能实现需要我们在工程里有一个类似loginMethod的函数去具体操作。
工作流程
站在实际开发的角度来解释,就是假如现在有一个网页,在网页中有个登录按钮需要通过JS调OC的方式实现。那么我们首先需要跟负责网页编码的人员(一般是后台)商定出一个方法名称,也就是给这个登录按钮点击事件取个名字,例如叫loginCallBack。然后我们需要在代码里注册这个事件并负责它的具体实现。当用户点击这个登录按钮的时候,后台就会通知给这个事件的注册者去执行,有点像block的执行顺序。
代码实现
假如我们现在商定了一个事件名称为loginFunc,我们来看一下代码实现。
/*** /@param registerHandler 要注册的事件名称(这里我们为loginFunc) /@param handel 回调block函数 当后台触发这个事件的时候会执行block里面的代码 ***/ [_bridge registerHandler:@"loginFunc" handler:^(id data, WVJBResponseCallback responseCallback) { // data 后台传过来的参数,例如用户名、密码等 NSLog(@"testObjcCallback called: %@", data); //具体的登录事件的实现,这里的login代表实现登录功能的一个OC函数。 [self login]; // responseCallback 给后台的回复 responseCallback(@"Response from testObjcCallback"); }];
OC调用JS
什么是OC调用JS
如果你理解了JS调用OC,那么OC调用JS就应该差不多懂了。同样举个例子,我们的原生APP上有个输入框,我们输入完成后,让它显示在网页上面的用户名处。这样,我们就是OC要实现的一个事件让网页去真正实现了,也就是OC调用JS。
OC调用JS
和JS调用OC的流程大致一样,还是需要和网页编写人员商定出一个事件名,然后在网页里面先把注册这样一个事件并把实现体写好,等到我们OC去触发这个事件(比如点击按钮)就会去网页里面找到这个事件的实现体并执行。
代码实现
假如我们现在商定了一个注册事件,事件名称为registerFunc,我
们来代码实现一下
//不需要传参数,不需要后台返回执行结果 [_bridge callHandler:@"registerFunc"]; //需要传参数,不需要从后台返回执行结果 /*** @param callHandler 商定的事件名称,用来调用网页里面相应的事件实现 @param data id类型,相当于我们函数中的参数,向网页传递函数执行需要的参数 ***/ [_bridge callHandler:@"registerFunc" data:@"name"]; //需要传参数,需要从后台返回执行结果 [_bridge callHandler:@"registerFunc" data:@"name" responseCallback:^(id responseData) { NSLog(@"后台执行完成后返回的数据"); }];
发送消息
概述
我们可以单纯地向JS发送数据,比如我们可以在网页加载完成后向网页发送一条加载完成的消息,或者传一个标题。
代码实现
//不需要后台返回执行结果或数据 [_bridge send:@"红色"]; //需要后台返回执行结果或数据 [_bridge send:@"红色" responseCallback:^(id responseData) { NSLog(@"后台执行完成后返回的数据 %@", responseData); }];
注意点
一定要注意和网页端商定的方法名必须要保证OC代码 里和网页编码里统一。在调用之前,必须要先注册事件,写好实现体。总结
本文只是简单地介绍了WebViewJavascriptBridge在实际开发中常用的几个方法,还有一些方法没有意义详讲,希望大家在掌握了这几个方法的使用后也去研究一下里面的其他方法。另外,本文重点是让ios工程师能快速使用,一些原理的东西还有JS方面的编码都省略了,可能文中有些地方理解不当或者不够深入,后期会再完善修改.最后,希望大家多提宝贵意见。
大家可去gitHub下载demo查看源码。
文/陈向阳哈(简书作者)
原文链接:http://www.jianshu.com/p/ca496cb680fe
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
相关文章推荐
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 峰回路转,Firefox 浏览器即将重返 iOS 平台
- 不可修补的 iOS 漏洞可能导致 iPhone 4s 到 iPhone X 永久越狱
- iOS 12.4 系统遭黑客破解,漏洞危及数百万用户
- 每日安全资讯:NSO,一家专业入侵 iPhone 的神秘公司
- [转][源代码]Comex公布JailbreakMe 3.0源代码
- 讲解iOS开发中基本的定位功能实现
- iOS中定位当前位置坐标及转换为火星坐标的方法
- js判断客户端是iOS还是Android等移动终端的方法
- iOS应用开发中AFNetworking库的常用HTTP操作方法小结
- iOS应用中UISearchDisplayController搜索效果的用法
- IOS开发环境windows化攻略
- iOS应用中UITableView左滑自定义选项及批量删除的实现
- iOS中UIAlertView警告框组件的使用教程
- 浅析iOS应用开发中线程间的通信与线程安全问题
- 检测iOS设备是否越狱的方法
- .net平台推送ios消息的实现方法
- 探讨Android与iOS,我们将何去何从?
- Android、iOS和Windows Phone中的推送技术详解