Objective-C与JavaScript交互的那些事

t144in93 8年前

来自： http://ios.jobbole.com/83945/

最近公司的运营瞎搞了个活动，其活动要服务端提供数据支持， web前端 在微信公众账号内作为主要的运营阵地，而 iOS 、 Android 要提供相应的入口及页面进行配合。一个活动，动用了各个端的程序猿。而在这里面技术方面主要就是涉及到 web端 和服务端的交互， web前端 和 iOS 、 Android 的交互。本人作为一个 iOS 开发者，今天就聊聊 web 、 iOS 、 Android 三端的交互，其实在说明白一点就是方法的互相调用而已。这里主要讲解 iOS 。 Android 会稍微提一下，仅作参考。

此篇文章的逻辑图

图0-0 此篇文章的逻辑图

概述

iOS原生应用和web页面的交互大致上有这几种方法 iOS7之后的JavaScriptCore 、 拦截协议 、 第三方框架WebViewJavaScriptBridge 、 iOS8之后的WKWebView 在这里主要讲解 JavaScriptCore 和 拦截协议 这两种办法。 WebViewJavaScriptBridge 是基于 拦截协议 进行的封装。学习成本相对 JavaScriptCore 较高，使用也不如 JavaScriptCore 方便本文不做叙述。 WKWebView 是iOS8之后推出的，还没有成为主流使用，所以本篇文章也不做详细叙述。

Objective-C执行JavaScript代码

相关方法

Objective-C 

// UIWebView的方法  - (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;    // JavaScriptCore中JSContext的方法  - (JSValue *)evaluateScript:(NSString *)script;  - (JSValue *)evaluateScript:(NSString *)script withSourceURL:(NSURL *)sourceURL
// UIWebView的方法  - (nullableNSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;     // JavaScriptCore中JSContext的方法  - (JSValue *)evaluateScript:(NSString *)script;  - (JSValue *)evaluateScript:(NSString *)script withSourceURL:(NSURL *)sourceURL
</div>

相关应用

用这些方法去执行大段的 JavaScript 代码是没什么必要的，但是有些小场景用起来还是比较顺手和实用的，列举两个例子作为参考：

Objective-C 

// 获取当前页面的title  NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];    // 获取当前页面的url  NSString *url = [webview stringByEvaluatingJavaScriptFromString:@"document.location.href"];
// 获取当前页面的title  NSString *title = [webviewstringByEvaluatingJavaScriptFromString:@"document.title"];     // 获取当前页面的url  NSString *url = [webviewstringByEvaluatingJavaScriptFromString:@"document.location.href"];
</div>

JavaScriptCore

iOS7 之后苹果推出了 JavaScriptCore 这个框架，从而让web页面和本地原生应用交互起来非常方便，而且使用此框架可以做到 Android 那边和 iOS 相对统一， web前端 写一套代码就可以适配客户端的两个平台，从而减少了web前端的工作量。

web前端

在三端交互中， web前端 要强势一些，一切传值、方法命名都按 web前端 开发人员来定义，让另外两端去做适配。在这里以调用摄像头和分享为例来详细讲解，测试网页代码取名为 test.html ，其代码内容如下：

test.html代码内容

Objective-C 

<!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" onclick="Toyun.callCamera()">      </div>               <div>          <input type="button" value="Share" onclick="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>
<!DOCTYPE html>  <html>  <headlang="en">      <metacharset="UTF-8">  </head>  <body>      <divstyle="margin-top: 100px">          <h1>Objective-C和JavaScript交互的那些事</h1>          <inputtype="button" value="CallCamera" onclick="Toyun.callCamera()">      </div>               <div>          <inputtype="button" value="Share" onclick="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>
</div>
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中的代码

Objective-C 

#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
#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.webViewloadRequest:[[NSURLRequest alloc]initWithURL:url]];     }     #pragma mark - UIWebViewDelegate     - (void)webViewDidFinishLoad:(UIWebView *)webView {      self.jsContext = [webViewvalueForKeyPath:@"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"];      [picCallbackcallWithArguments:@[@"photos"]];  }     - (void)share:(NSString *)shareString {      NSLog(@"share:%@", shareString);      // 分享成功回调js的方法shareCallback      JSValue *shareCallback = self.jsContext[@"shareCallback"];      [shareCallbackcallWithArguments:nil];  }     @end
</div>
ViewController中的代码解释

自定义 JSObjcDelegate 协议，而且此协议必须遵守 JSExport 这个协议，自定义协议中的方法就是暴露给 web页面 的方法。在 webView 加载完毕的时候获取 JavaScript 运行的上下文环境，然后再注入桥梁对象名为 Toyun ，承载的对象为 self 即为此控制器，控制器遵守此自定义协议实现协议中对应的方法。在 JavaStript 调用完本地应用的方法做完相对应的事情之后，又回调了 JavaStript 中对应的方法，从而实现了 web页面 和 本地应用 之间的通讯。

JavaScriptCore使用注意

JavaStript 调用本地方法是在 子线程 中执行的，这里要根据实际情况考虑线程之间的切换，而在回调 JavaScript 方法的时候最好是在刚开始调用此方法的线程中去执行那段 JavaStript 方法的代码，我在实际运用中开始没注意，就被坑惨了啊。什么，说的太绕，看下面的代码解释：

Objective-C 

//  假设此方法是在子线程中执行的，线程名sub-thread  - (void)callCamera {           // 这句假设要在主线程中执行，线程名main-thread      NSLog(@"callCamera");          // 下面这两句代码最好还是要在子线程sub-thread中执行啊      JSValue *picCallback = self.jsContext[@"picCallback"];      [picCallback callWithArguments:@[@"photos"]];  }
//  假设此方法是在子线程中执行的，线程名sub-thread  - (void)callCamera {          // 这句假设要在主线程中执行，线程名main-thread      NSLog(@"callCamera");           // 下面这两句代码最好还是要在子线程sub-thread中执行啊      JSValue *picCallback = self.jsContext[@"picCallback"];      [picCallbackcallWithArguments:@[@"photos"]];  }
</div>
运行效果

运行效果如图3-1所示

图3-1 运行效果
</div>

拦截协议

拦截协议这个适合一些比较简单的一些情况，不需要引入什么框架，只需要 web前端 配合一下就好。但是在具体调用哪一个方法上，以及在传值的时候可能会有些不方便，而且调用完后无法在回调 JavaScript 的方法。

web前端

test.html中的代码

Objective-C 

<!DOCTYPE html>  <html>  <head lang="en">      <meta charset="UTF-8">  </head>  <body>      <div>          <input type="button" value="CallCamera" onclick="callCamera()">      </div>    <script>      function callCamera() {          window.location.href = 'toyun://callCamera';      }  </script>  </body>  </html>
<!DOCTYPE html>  <html>  <headlang="en">      <metacharset="UTF-8">  </head>  <body>      <div>          <inputtype="button" value="CallCamera" onclick="callCamera()">      </div>     <script>      function callCamera() {          window.location.href = 'toyun://callCamera';      }  </script>  </body>  </html>
</div>
test.html中的代码解释

这段代码相比上面的那段测试代码是很简单的，同样有一个按钮，名字为 CallCamera 点击之后调用自己的 callCamera 方法， window.location.href 这里是改变主窗口的指向从而马上发出一个链接为 toyun://callCamera 请求，而想要传给原生应用的参数也可已包含到此请求中，而在iOS方法中我们要拦截这个请求，根据请求内容去判断 JavaStript 想要做的事情，从而实现 web页面 和 本地应用 之间的交互。

iOS

iOS对应的代码

Objective-C 

- (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;  }
- (BOOL)webView:(UIWebView *)webViewshouldStartLoadWithRequest:(NSURLRequest *)requestnavigationType:(UIWebViewNavigationType)navigationType  {      NSString *url = request.URL.absoluteString;      if ([urlrangeOfString:@"toyun://"].location != NSNotFound) {           // url的协议头是toyun          NSLog(@"callCamera");          return NO;      }      return YES;  }
</div>
iOS对应的代码的解释

在 webView 的代理方法中去拦截自定义的协议 Toyun:// 如果是此协议则据此判断 JavaStript 想要做的事情，调用原生应用的方法，这些都是提前约定好的，同时阻止此链接的跳转。

总结

随着手机硬件的配置越来越强大和 HTML5 的兴起，一个 App 完全可以由 web页面 来写。现在已经有部分应用这么干了，我是遇见过的，如 古诗文网 。尽管比较少但是 web页面 和 本地应用 的交互不论是 iOS 还是 Android 都是会有遇到的。 iOS 我还是比较推荐 JavaScriptCore ，这样三端可以相对统一起来，写的时候都比较简单。随着时间的推移 iOS8 推出的 WKWebView 会逐渐成为主流,这个的功能更强大。 拦截协议 也只能说用到比较简单的一些情况吧，复杂的情况处理相互之间参数的传递还是比较麻烦的，而且这个不能回调 JavaScript 的方法，确实喜欢拦截协议的同学可以研究 WebViewJavaScriptBridge 这个第三方库。对于 Android 本人也就是略知皮毛而已，就不班门弄斧了，对于一些 Android开发者 来说，可以看地第一段的 test.html 这个页面的写法完全是可以适配 Android 的。

参考

</div>

相关经验