你中有我,我中有你。

今天分享下最近学习到的:在 Mac OS X 平台上,实现 Javascript 与 Objective-C 两种编程语言的交互机制。

你侬我侬,忒煞情多。
情多处热如火。
把一块泥,捻一个你,
塑一个我,将咱两个,
一齐打破,用水调和,
再捻一个你,再塑一个我。
我泥中有你,你泥中有我,
与你生同一个衾(qin),
死同一个椁(guo)。

背景

现在很多视频或者音乐的客户端,比如 QQ Music For Mac。往往通过在客户端嵌入网页的方式来展现内容,并通过 Javascript 调用客户端的一些功能,比如下载视频或者播放音乐等。

嵌入网页基本都是采用 WebView 控件来展示网页,这时客户端好像内嵌了一个微型的浏览器。

用嵌入网页的方式,好处是显然的:

  • 网页可以轻易做出很炫丽的效果,当然客户端通过艰难的自绘也可以做出很华丽的效果,但开发时间跟开发难度跟网页比起来没得比。

  • 网页可以随时更改,更改后可以实时更新到你发出去的每一个客户端版本,这种扩展性在实战中是很重要的。

Javascript 与 Objective-C 双方是对等的,也就是 JS 可以调用 OC,反过来 OC 也可以调用 JS。

Demo

  • 官方例子: CallJS ,详细了介绍上面所述的所有技术细节。

  • 你也可以在 GitHub 上直接下载我写的这个 Demo:JS-OC-Communicate-Tutorial

技术细节

类型转换

从 Demo 中可以看出,在 OC 与 JS 通信时,变量的类型会自动进行转换,基本类型都会自动转换,如 JS 中的 number、boolean 都会转换成 OC 中的 NSNumber 类型,而 String 类型会自动转换成 NSString 类型,JS 中的对象会转换成 WebScriptObject 对象,而相关的属性信息可以通过 Key-Value 的方法读取和写入。

OC 调用 JS:

1、OC 执行一段 JS 代码,使用下面的函数:

- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

2、OC 调用 html 页面里面的 JS 函数

比如 js 端有一个函数 JSFunction:

function JSFunction(parameter)
{
    //显示OC返回的值
    document.getElementById('view').value = parameter;

    //返回成功的消息
    var result = {'message':'Web page has received msg!'};
    return result;
}

OC 端可以用下面的方法来调用:

- (IBAction)doAction:(id)sender
{
    //设置对象
    WebScriptObject *result = [[self.webView windowScriptObject] callWebScriptMethod:@"JSFunction" withArguments:@[self.textField.stringValue]];

    NSString *message = [result valueForKey:@"message"];
}

JS 调用 OC:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/* 当页面加载完成,将要执行JS之前,didClearWindowObject 消息将会发送给 webview 的frameLoadDelegate。我们可以在这个最完美的时机里,设置一个属于我们自己的JS对象
*/
- (void)webView:(WebView *)sender didClearWindowObject:(WebScriptObject *)windowObject forFrame:(WebFrame *)frame
{
/*将当前对象加到JS里面的window全局对象里面,并命名为native。
之后可以在JS通过使用native变量来使用当前的对象
*/
[windowObject setValue:self forKey:@"native"];
}

/*
返回是否阻止响应该方法,
返回NO即能响应该方法
*/
+ (BOOL)isSelectorExcludedFromWebScript:(SEL)selector
{
if (selector == @selector(status:))
{
return NO;
}
return YES;
}

/*
返回本地方法在JS中的名称
*/
+ (NSString *)webScriptNameForSelector:(SEL)sel
{
if (sel == @selector(status:))
{
return @"ocMethod";
}
return nil;
}

/*
返回是否阻止获取该属性,
返回NO即能获取该属性
*/
+ (BOOL)isKeyExcludedFromWebScript:(const char *)property
{
if (strcmp(property, "sharedValue") == 0)
{
return NO;
}
return YES;
}

/*
返回本地属性在JS中的名称
*/
+ (NSString *)webScriptNameForKey:(const char *)name
{
if (strcmp(name, "sharedValue"))
{
return @"oc_sharedValue";
}
return nil;
}

JS 中代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
function CallNative()
{
if (native)
{
//将当前显示的文本组装成对象发给OC
var consoleValue = document.getElementById('view').value;
var parameter = {'message':consoleValue};
var result = native.ocMethod(parameter);

//显示OC返回的结果
document.getElementById('view').value = result['message'];
}
}

总结

利用 Javascript 与 Objective-C 的通信机制,可以通过 HTML、Javascript、CSS 等 Web 技术实现炫丽的 UI ,而通过原生 API 实现与本地相关的操作。这对于 OSX 平台上的桌面客户端开发者而言是大大的福音。

参考