注:此文只现在只推荐需要适配iOS7的同学读,如果已经扔掉iOS7,强烈建议换用WKWebView。已出WKWebView文章WKWebView使用及注意点(keng)
最近公司的运营瞎搞了个活动,其活动要服务端提供数据支持,web前端
在微信公众账号内作为主要的运营阵地,而iOS
、Android
要提供相应的入口及页面进行配合。一个活动,动用了各个端的程序猿。而在这里面技术方面主要就是涉及到web端
和服务端的交互,web前端
和iOS
、Android
的交互。本人作为一个iOS
开发者,今天就聊聊web
、iOS
、Android
三端的交互,其实在说明白一点就是方法的互相调用而已。这里主要讲解iOS
。Android
会稍微提一下,仅作参考。
此篇文章的逻辑图
概述
iOS原生应用和web页面的交互大致上有这几种方法iOS7之后的JavaScriptCore
、拦截协议
、第三方框架WebViewJavaScriptBridge
、iOS8之后的WKWebView
在这里主要讲解JavaScriptCore
和拦截协议
这两种办法。WebViewJavaScriptBridge
是基于拦截协议
进行的封装。学习成本相对JavaScriptCore
较高,使用也不如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
相关应用
用这些方法去执行大段的JavaScript
代码是没什么必要的,但是有些小场景用起来还是比较顺手和实用的,列举两个例子作为参考:
// 获取当前页面的title
NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];
// 获取当前页面的url
NSString *url = [webview stringByEvaluatingJavaScriptFromString:@"document.location.href"];
JavaScriptCore
iOS7
之后苹果推出了JavaScriptCore
这个框架,从而让web页面和本地原生应用交互起来非常方便,而且使用此框架可以做到Android
那边和iOS
相对统一,web前端
写一套代码就可以适配客户端的两个平台,从而减少了web前端的工作量。
web前端
在三端交互中,web前端
要强势一些,一切传值、方法命名都按web前端
开发人员来定义,让另外两端去做适配。在这里以调用摄像头和分享为例来详细讲解,测试网页代码取名为test.html
,其代码内容如下:
test.html代码内容
Objective-C和JavaScript交互的那些事
test.html代码解释
可能有些同学对web前端
的一些知识不太熟悉,稍微对这段代码做下解释,先说Toyun
是iOS
和Android
这两边在本地要注入的一个对象【参考下面iOS的代码更容易明白】,充当原生应用和web页面之间的一个桥梁。页面上定义了两个按钮名字分别为CallCamera
和Share
。点击CallCamera
会通过Toyun
这个桥梁调用本地应用的方法- (void)callCamera
,没有传参;而点击Share
会先调用本文件中的JavaScript
方法callShare
这里将要分享的内容格式转成JSON字符串
格式(这样做是为了适配Android
,iOS
可以直接接受JSON对象
)然后再通过Toyun
这个桥梁去调用原生应用的- (void)share:(NSString *)shareInfo
方法这个是有传参的,参数为shareInfo
。而下面的两个方法为原生方法调用后的回调方法,其中picCallback
为获取图片成功的回调方法,并且传回拿到的图片photos
;shareCallback
为分享成功的回调方法。
iOS
iOS
这边根据前端定义的方法名来写代码,但是有些时候web前端
会让我们定义,但是我们定义好之后他又要修改,这时候就会很烦啊。所以碰到三端交互的时候最好就是让web前端
去定义方法名,iOS
和Android
根据web前端
定义好的去写代码。JavaScriptCore
中web页面
调用原生应用的方法可以用Delegate
或Block
两种方法,此文以按Delegate
讲解。
JavaScriptCore中类及协议:
- JSContext:给
JavaScript
提供运行的上下文环境 - JSValue:
JavaScript
和Objective-C
数据和方法的桥梁 - JSManagedValue:管理数据和方法的类
- JSVirtualMachine:处理线程相关,使用较少
- JSExport:这是一个协议,如果采用协议的方法交互,自己定义的协议必须遵守此协议
ViewController中的代码
#import "ViewController.h"
#import
@protocol JSObjcDelegate
- (void)callCamera;
- (void)share:(NSString *)shareString;
@end
@interface ViewController ()
@property (nonatomic, strong) JSContext *jsContext;
@property (weak, nonatomic) IBOutlet UIWebView *webView;
@end
@implementation ViewController
#pragma mark - Life Circle
- (void)viewDidLoad {
[super viewDidLoad];
NSURL *url = [[NSBundle mainBundle] URLForResource:@"test" withExtension:@"html"];
[self.webView loadRequest:[[NSURLRequest alloc] initWithURL:url]];
}
#pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
self.jsContext[@"Toyun"] = self;
self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
context.exception = exceptionValue;
NSLog(@"异常信息:%@", exceptionValue);
};
}
#pragma mark - JSObjcDelegate
- (void)callCamera {
NSLog(@"callCamera");
// 获取到照片之后在回调js的方法picCallback把图片传出去
JSValue *picCallback = self.jsContext[@"picCallback"];
[picCallback callWithArguments:@[@"photos"]];
}
- (void)share:(NSString *)shareString {
NSLog(@"share:%@", shareString);
// 分享成功回调js的方法shareCallback
JSValue *shareCallback = self.jsContext[@"shareCallback"];
[shareCallback callWithArguments:nil];
}
@end
ViewController中的代码解释
自定义JSObjcDelegate
协议,而且此协议必须遵守JSExport
这个协议,自定义协议中的方法就是暴露给web页面
的方法。在webView
加载完毕的时候获取JavaScript
运行的上下文环境,然后再注入桥梁对象名为Toyun
,承载的对象为self
即为此控制器,控制器遵守此自定义协议实现协议中对应的方法。在JavaScript
调用完本地应用的方法做完相对应的事情之后,又回调了JavaScript
中对应的方法,从而实现了web页面
和本地应用
之间的通讯。
JavaScriptCore使用注意
JavaScript
调用本地方法是在子线程中执行的,这里要根据实际情况考虑线程之间的切换,而在回调JavaScript
方法的时候最好是在刚开始调用此方法的线程中去执行那段JavaScript
方法的代码,我在实际运用中开始没注意,就被坑惨了啊。什么,说的太绕,看下面的代码解释:
// 假设此方法是在子线程中执行的,线程名sub-thread
- (void)callCamera {
// 这句假设要在主线程中执行,线程名main-thread
NSLog(@"callCamera");
// 下面这两句代码最好还是要在子线程sub-thread中执行啊
JSValue *picCallback = self.jsContext[@"picCallback"];
[picCallback callWithArguments:@[@"photos"]];
}
运行效果
运行效果如图3-1所示
拦截协议
拦截协议这个适合一些比较简单的一些情况,不需要引入什么框架,只需要web前端
配合一下就好。但是在具体调用哪一个方法上,以及在传值的时候可能会有些不方便,而且调用完后无法在回调JavaScript
的方法。
web前端
test.html中的代码
test.html中的代码解释
这段代码相比上面的那段测试代码是很简单的,同样有一个按钮,名字为CallCamera
点击之后调用自己的callCamera
方法,window.location.href
这里是改变主窗口的指向从而马上发出一个链接为toyun://callCamera
请求,而想要传给原生应用的参数也可已包含到此请求中,而在iOS方法中我们要拦截这个请求,根据请求内容去判断JavaScript
想要做的事情,从而实现web页面
和本地应用
之间的交互。
iOS
iOS对应的代码
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSString *url = request.URL.absoluteString;
if ([url rangeOfString:@"toyun://"].location != NSNotFound) {
// url的协议头是toyun
NSLog(@"callCamera");
return NO;
}
return YES;
}
iOS对应的代码的解释
在webView
的代理方法中去拦截自定义的协议Toyun://
如果是此协议则据此判断JavaScript
想要做的事情,调用原生应用的方法,这些都是提前约定好的,同时阻止此链接的跳转。
总结
随着手机硬件的配置越来越强大和HTML5
的兴起,一个App
完全可以由web页面
来写。现在已经有部分应用这么干了,我是遇见过的,如古诗文网。尽管比较少但是web页面
和本地应用
的交互不论是iOS
还是Android
都是会有遇到的。iOS
我还是比较推荐JavaScriptCore
,这样三端可以相对统一起来,写的时候都比较简单。随着时间的推移iOS8
推出的WKWebView
会逐渐成为主流,这个的功能更强大。拦截协议
也只能说用到比较简单的一些情况吧,复杂的情况处理相互之间参数的传递还是比较麻烦的,而且这个不能回调JavaScript
的方法,确实喜欢拦截协议的同学可以研究WebViewJavaScriptBridge这个第三方库。对于Android
本人也就是略知皮毛而已,就不班门弄斧了,对于一些Android开发者
来说,可以看地第一段的test.html
这个页面的写法完全是可以适配Android
的。
更新
关于使用过程中的坑,出了一片续,具体参看JavaScript和Objective-C交互的那些事(续)
关于WKWebView,已经出了一篇新文章,具体参看WKWebView使用及注意点(keng)
参考
- iOS与JS交互实战篇(ObjC版)