之前自己闲着无聊写过几个套用网页的 “皮包软件 ” ,其实像这样的 “ 皮包软件 ” 也可以做得很高端大气的,通过 WebKit 实现的 OC-JS Bridge ,可以非常方便的实现在 JS 中调用 OC 的方法 / 在 OC 中调用 JS 的方法。如此一来,便可以通过 web 实现炫丽的 UI, 而通过原生 API 实现与本地相关的操作。 希望这篇文章对 学习 Objective-C 的同学有所帮助。
1、 JS中变量在 OC 中的类型 通过 OC-JS Bridge,变量的类型会自动进行转换,基本类型都会自动转换,如 JS 中的 number 、 boolean 都会转换成 OC 中的 NSNumber 类型,而 String 类型会自动转换成 NSString 类型, JS 中的对象会转换成 WebScriptObject 对象,而相关的属性信息可以通过 Key-Value 的方法读取和写入,本文后面可看到相关的代码。
2、实现在 OC 中调用 JS 方法 在 OC中调用 JS 方法是非常方便的, WebView 有一个 windowScriptObject 属性,可以直接获得脚本对象,然后便可以调用 callWebScriptMethod:withArguments 将消息转发给 JS 中对象的方法和参数,对于简单的方法调用你也可以直接通过 WebView 的方法 stringByEvaluatingJavaSc riptFromString 去执行一段 JS 代码,并返回字符串。示例代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
//在OC中的调用 - (void)ocAction:(id)sender { NSArray *args = @[@"Hello,JS!"]; id result = [[webView windowScriptObject] callWebScriptMethod:@"JSFunction" withArguments:args]; NSLog(@"%@",result); } //在JS中对应的方法 function JSFunction(parameter) { //显示OC返回的值 alert(parameter); //返回成功的消息 return 'Web程序已经收到消息!'; }
3、实现 JS 调用 OC 的方法 通过设置 webView的 frameLoadDelegate ,在 – webView:didClearWindowObject:forFrame: 回调方法中,指定一个本地对象(该对象实现 WebScripting 协议),然后 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
//该方法用于JS中调用 - (WebScriptObject *)status:(WebScriptObject *)jsObject { //将JS发过来的信息显示出来 NSString *message = [jsObject valueForKey:@"message"]; NSLog(@"%@",message); //返回成功的信息(WebScriptObject对象不能自己创建,所以此处复用了传入的参数) [jsObject setValue:@"本地端已经收到消息啦!" forKey:@"message"]; return jsObject; } #pragma mark - #pragma mark WebFrameLoadDelegate //通过此回调,将self传递给JS环境 - (void)webView:(WebView *)sender didClearWindowObject:(WebScriptObject *)windowObject forFrame:(WebFrame *)frame { [windowObject setValue:self forKey:@"native"]; } #pragma mark - #pragma mark WebScriptingProtocol + (BOOL)isSelectorExcludedFromWe bScript:(SEL)selector { if (selector == @selector(status:)) { return NO; } return YES; } + (NSString *)webScriptNameForSelector :(SEL)sel { if (sel == @selector(status:)) { return @"ocMethod"; } return nil; }
JS中代码如下:
1 2 3 4 5 6 7 8 9 10 11 12
function CallNative() { if (native) { //将消息组装成对象发给OC var parameter = {'message':'Hello,Objective-C!'}; var result = native.ocMethod(parameter); //显示OC返回的结果 alert(result['message']); } }
文章来自:博客园 /紫風 . づ