JavaScriptCore
iOS7
之后苹果推出了JavaScriptCore
这个框架,从而让web页面和本地原生应用交互起来非常方便,而且使用此框架可以做到Android
那边和iOS
相对统一,web前端
写一套代码就可以适配客户端的两个平台,从而减少了web前端的工作量。
web前端
在三端交互中,web前端
要强势一些,一切传值、方法命名都按web前端
开发人员来定义,让另外两端去做适配。在这里以调用摄像头和分享为例来详细讲解,测试网页代码取名为test.html
,其代码内容如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<div style="margin-top: 100px">
<h1>Objective-C和JavaScript交互的那些事</h1>
<input type="button" value="CallCamera" οnclick="Toyun.callCamera()">
</div>
<div>
<input type="button" value="Share" οnclick="callShare()">
</div>
<script>
var callShare = function() {
var shareInfo = JSON.stringify({"title": "标题", "desc": "内容", "shareUrl": "http://www.jianshu.com/p/f896d73c670a",
"shareIco":"http://upload-images.jianshu.io/upload_images/1192353-fd26211d54aea8a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"});
Toyun.share(shareInfo);
}
var picCallback = function(photos) {
alert(photos);
}
var shareCallback = function(){
alert('success');
}
</script>
</body>
</html>
iOS
iOS
这边根据前端定义的方法名来写代码,但是有些时候web前端
会让我们定义,但是我们定义好之后他又要修改,这时候就会很烦啊。所以碰到三端交互的时候最好就是让web前端
去定义方法名,iOS
和Android
根据web前端
定义好的去写代码。JavaScriptCore
中web页面
调用原生应用的方法可以用Delegate
或Block
两种方法,此文以按Delegate
讲解。
JavaScriptCore中类及协议:
- JSContext:给
JavaScript
提供运行的上下文环境 - JSValue:
JavaScript
和Objective-C
数据和方法的桥梁 - JSManagedValue:管理数据和方法的类
- JSVirtualMachine:处理线程相关,使用较少
- JSExport:这是一个协议,如果采用协议的方法交互,自己定义的协议必须遵守此协议
#import "ViewController.h"
#import <JavaScriptCore/JavaScriptCore.h>
@protocol JSObjcDelegate <JSExport>
- (void)callCamera;
- (void)share:(NSString *)shareString;
@end
@interface ViewController () <UIWebViewDelegate, JSObjcDelegate>
@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
即为此控制器,控制器遵守此自定义协议实现协议中对应的方法。在JavaStript
调用完本地应用的方法做完相对应的事情之后,又回调了JavaStript
中对应的方法,从而实现了web页面
和本地应用
之间的通讯。
JavaScriptCore使用注意
JavaStript
调用本地方法是在子线程中执行的,这里要根据实际情况考虑线程之间的切换,而在回调JavaScript
方法的时候最好是在刚开始调用此方法的线程中去执行那段JavaStript
方法的代码。
使用时两个注意点:
1. ViewController中
JSObjcDelegate 名下的方法不能加 optional ;
2. JSObjcDelegate 中的方法不但名称要和 js 中声明的一致,参数类型也要一致