100steps/Blogs

OC与js的交互问题

Opened this issue · 0 comments

Authority01 commented

由于在app中webview的广泛使用，移动端如何与前端交互是一个需要我们考虑的问题，在这里介绍一下iOS开发中OC与js交互的问题。

OC中调用js方法

1.通过UIWebView的stringByEvaluatingJavaScriptFromString进行调用

首先我们需要知道js方法名，比如js方法名为：JSFunc()，那么我们可以通过以下代码来调用

UIWebView *webview=[[UIWebView alloc]init];
[webView stringByEvaluatingJavaScriptFromString:@"JSFunc()"];

注：这个方法是同步的

2.通过WKWebView的evaluateJavaScript进行调用

同样的我们需要知道js方法名，比如js方法名为：JSFunc()

WKWebView *webview=[[WKWebView alloc]init];
[webview evaluateJavaScript:@"JSFunc()" completionHandler:^(id _Nullable script, NSError * _Nullable error) {

 }];

参数1：@param 是调用的js方法，并传值
参数2：如果JavaScript 代码出错, 可以在completionHandler 进行处理.
注：WKWebView在iOS8之后才可以使用，推荐用其代替UIWebView

js调用OC的方法

比起OC中一行就可以调用js方法，js调用OC的方法比较复杂，iOS7引入了JavaScriptCore框架，使得调用变得简单，在这里只介绍JavaScriptCore的使用方法

JavaScriptCore简述

JSValue: 代表一个JavaScript实体，一个JSValue可以表示很多JavaScript原始类型例如boolean, integers, doubles，甚至包括对象和函数。
JSContext: 代表JavaScript的运行环境，你需要用JSContext来执行JavaScript代码。所有的JSValue都是捆绑在一个JSContext上的。
JSExport: 这是一个协议，可以用这个协议来将原生对象导出给JavaScript，这样原生对象的属性或方法就成为了JavaScript的属性或方法，非常神奇。

具体使用方法

首先写一个简单的js方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>test javascript</title>
    </head>
    <body>
        <div>
            <button onclick="ttf.OCFunc('JS与OC交互');">点击我然后看xcode的log</button> 
        </div>
    </body>
</html>

然后在OC中新建一个类

//首先引入框架
#import <JavaScriptCore/JavaScriptCore.h>
//定义一个协议继承JSExport协议
@protocol PersonJSExport <JSExport>
- (void)OCFunc:(NSString *)str; //协议里面要声明调用的方法
@end

//我们的自定义类要遵循我们自己定义的这个协议
@interface MyJSObject() <PersonJSExport>
- (void)OCFunc:(NSString *)str;
@end

@implementation MyJSObject
- (void)OCFunc:(NSString *)str {
    NSLog(@"%@", str);
}
@end

向UIWebView对象拿JSContext环境对象，并注入刚才新建的对象

JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

MyJSObject *jsObject = [MyJSObject new];
context[@"ttf"] = jsObject;    //将对象注入这个context中

这样就完成了！
这里只介绍了比较简单的实现方式
详情可以看这篇文章：http://www.jianshu.com/p/59242a92d4f2