随着中秋国庆的到来，公司的运营要搞一系列活动，这就需要服务端提供数据支持，iOS、Android要提供相应的入口及页面进行配合，实现邀请好友分享得奖励的功能。这里面涉及到web端和服务端的交互，web端和iOS、Android的交互，在这仅仅学习下iOS和web的交互。
iOS原生应用和web页面的交互有iOS7之后的JavaScriptCore、拦截协议、第三方框架WebViewJavaScriptBridge、iOS8之后的WKWebView几种方法，这一章我们主要讲解JavaScriptCore和拦截协议这两种办法。WebViewJavaScriptBridge是基于拦截协议进行的封装，使用也不如JavaScriptCore方便本文不做细讲。WKWebView是iOS8之后推出的，还没有成为主流使用，所以本篇文章也不做详细叙述。
Objective-C调用JavaScript代码
// UIWebView的方法
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
// JavaScriptCore中JSContext的方法
- (JSValue *)evaluateScript:(NSString *)script;
- (JSValue *)evaluateScript:(NSString *)script withSourceURL:(NSURL *)sourceURL
用这些方法执行复杂的一大段js代码也是没有必要的，在一些场景下还是比较实用的，比如
// 获取当前页面的title
NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];
// 获取当前页面的url
NSString *url = [webview stringByEvaluatingJavaScriptFromString:@"document.location.href"];
JavaScriptCore概述
JavaScriptCore这个框架是iOS7之后苹果推出的，方便了开发者的使用，让web页面和iOS本地原生应用交互起来更加简单。
web前端
在与前端交互过程中，需要与前端开发人员沟通好传值、方法名等，然后移动端做适配。这里以传值、调用本地alert、分享为例来讲解，用webView加载HTML文件,这里用的是本地HTML名字为JavaScriptCore.html，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 来自html中的jsCallOC标题</title>
</head>
<body>
<div style="margin-top: 20px">
<h2>JavaScript与OC的交互</h2>
<input type="button" value="Native传值" onclick="Native.callme('jS开始调用OC本地Native咯')">
</div>
<div>
<input type="button" value="oc原生Alert" onclick="deliverValue('来自HTML中的Alert信息')">
</div>
<div>
<input type="button" value="Share" onclick="callShare()">
</div>
<script>
var alertShowIn = function(str) {
alert(str);
}
var callShare = function() {
var shareUrl = "http://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&ie=utf-8&in=24401&cl=2&lm=-1&st=-1&step_word=&rn=1&cs=&ln=1998&fmq=1402900904181_R&ic=0&s=&se=1&sme=0&tab=&width=&height=&face=0&is=&istype=2&ist=&jit=&fr=ala&ala=1&alatpl=others&pos=1&pn=1&word=图片%20动漫卡通&di=0&os=1199087710,2399135616&pi=0&objurl=http%3A%2F%2Fv.flash.beijingww.com%2Fcomic%2Fwallpaper%2Fjiqimao%2F15.jpg"
Native.share(shareUrl);
}
var shareCallBack = function(){
alert('回调js分享success');
}
</script>
</body>
</html>
JavaScriptCore.html代码解释如下：
Native是iOS本地要注入的一个对象，也就是web页面与原生应用的一个桥接。页面上定义了Native传值、oc原生Alert、Share三个按钮，点击Native传值首先通过Native这个桥梁调用本地的方法- (void)callme:(NSString *)string并传入参数；点击oc原生Alert按钮通过 self.context[@"deliverValue"] = ^(NSString *message) 的block形式直接调用；点击Share按钮会先调用html本地文件中的JavaScrip的function方法callShare，这里将分享的url参数传给share方法，然后再通过Native桥梁去调用原生应用的本地方法- (void)share:(NSString *)shareUrl，而shareCallBack为分享成功的回调方法，也就是原生方法调用后js的回调方法。
iOS移动端
JavaScriptCore中web页面调用原生应用的方法可以用Delegate或Block两种方法。
JavaScriptCore中类及协议：
JSContext：给JavaScript提供运行的上下文环境
JSValue：JavaScript和Objective-C数据和方法的桥梁
JSExport：协议，如果采用协议的方法交互，自己定义的协议必须遵守此协议
ViewController中的代码
#import <JavaScriptCore/JavaScriptCore.h>
@protocol JSObjectDelegate <JSExport>
-(void)callme:(NSString *)string;
-(void)share:(NSString *)shareUrl;
@end
@interface JSCallOCViewController () <UIWebViewDelegate, JSObjectDelegate>
@property(nonatomic, strong) UIWebView *webView;
@property(nonatomic, strong) JSContext *context;
@end
@implementation JSCallOCViewController
-(void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
self.title = @"js call oc";
self.view.backgroundColor = [UIColor whiteColor];
self.webView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight)];
[self.view addSubview:self.webView];
NSString *path = [[NSBundle mainBundle] pathForResource:@"JavaScriptCore" ofType:@"html"];
NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]];
self.webView.delegate = self;
[self.webView loadRequest:request];
}
#pragma mark - UIWebViewDelegate
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
//获取html title设置导航栏 title
self.title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//捕捉异常回调
self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息: %@",exceptionValue);
};
//通过JSExport协议关联Native的方法
self.context[@"Native"] = self;
//通过block形式关联JavaScript中的函数
__weak typeof(self) weakSelf = self;
self.context[@"deliverValue"] = ^(NSString *message) {
__strong typeof(self) strongSelf = weakSelf;
dispatch_async(dispatch_get_main_queue(), ^{
UIAlertController *alertControl = [UIAlertController alertControllerWithTitle:@"this is a message" message:message preferredStyle:UIAlertControllerStyleActionSheet];
UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
}];
[alertControl addAction:cancelAction];
[strongSelf.navigationController presentViewController:alertControl animated:YES completion:nil];
});
};
}
-(void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
{
NSLog(@"error == %@",error);
}
#pragma mark - JSExport Methods
-(void)callme:(NSString *)string
{
NSLog(@"%@",string);
}
-(void)share:(NSString *)shareUrl
{
NSLog(@"分享的url=%@",shareUrl);
JSValue *shareCallBack = self.context[@"shareCallBack"];
[shareCallBack callWithArguments:nil];
}
代码解释：
自定义JSObjectDelegate协议的时候必须遵守JSExport这个协议，这些自定义的协议中的方法是留给web页面的接口方法。在webView加载完毕的时候获取JavaScript运行的上下文环境，然后注入桥接的对象Native，对象self就是此控制器，控制器遵守此自定义协议实现协议中的相对应的方法。当JavaStript调用完原生本地应用的方法后，再回调JavaScript中对应的方法，从而实现了Web页面和原生本地应用之前的通信。
OC调用JS效果图：
屏幕快照 2016-09-22 下午3.17.26.png
JS调用OC代码
-(void)caculateButtonAction:(id)sender
{
NSNumber *inputNumber = [NSNumber numberWithInteger:[textField.text integerValue]];
JSValue *function = [self.context objectForKeyedSubscript:@"factorial"];
JSValue *result = [function callWithArguments:@[inputNumber]];
resultL.text = [NSString stringWithFormat:@"%@",[result toNumber]];
JS调用OC效果图：
屏幕快照 2016-09-22 下午3.28.39.png
ps：注意JavaStript调用本地方法是在子线程中执行的，在回调JavaStript方法的时候最好与刚开始调用此方法的线程保持同一个，要考虑线程之间的切换。
拦截协议
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div>
<input type="button" value="changeWindow" onclick="callMethod()">
</div>
<script>
function callMethod() {
window.location.href = 'wjika://changeWindow';
}
</script>
</body>
</html>
html代码解释:
点击changeWindow按钮调用网页callMethod方法，方法的实现是window.location.href改变主窗口的指向，也就是发出一个链接为wjika://changeWindow的请求，从而将内容传递给原生应用，请求中可以传递原生应用需要的参数。在原生应用中我们可以拦截这个请求，根据内容去判断JavaStript想要我们做的事情，这就实现了web页面和原生应用本地之间的交互。
viewController中的代码
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSString *url = request.URL.absoluteString;
if ([url rangeOfString:@"wjika://"].location != NSNotFound) {
// url的协议头是wjika
NSLog(@"改变窗口指向");
return YES;
}
return No;
}
在webView的shouldStartLoadWithRequest代理方法中去拦截自定义的协议wjika://如果是此协议则去做JavaStript想要移动端做的事情，调用原生应用的方法，注意协议的头等字段是前端和移动端事先约定好的。
ps：拦截协议适合一些简单的情况，复杂的交互需要相互传递参数的比较麻烦，并且不能回调JavaScript的方法。另外研究拦截协议的朋友可以看看WebViewJavaScriptBridge这个第三方，是对拦截协议的封装。 JavaScriptCore使用起来比较简单，方便web端和移动端的统一。iOS8推出的WKWebView会逐渐成为主流,这个功能更强大。仅供交流学习，欢迎各位同学指正。
Ps:本文项目demo
https://github.com/maying1992/iOS-JavaScriptCore.git
参考
iOS中实现JS和OC的交互(Hybrid App)
网友评论