iOS原生&JS交互

OC

• 获取js中的key

    NSString * jsCode = @"var arr = [1,2,3]";
    JSContext * ctx = [[JSContext alloc] init];
    [ctx evaluateScript:jsCode];    
    JSValue * jsArr = ctx[@"arr"];    
    jsArr[0] = @5;
    NSLog(@"%@",jsArr);  // 5 , 2 , 3

• OC调用js方法

    NSString * jsCode = @"function hello(say){"
    "return say ;"
    "}";
    JSContext * ctx = [[JSContext alloc] init];
    [ctx evaluateScript:jsCode];
    
    JSValue * hello = ctx[@"hello"];
    
    JSValue * result = [hello callWithArguments:@[@"你好"]];
    
    NSLog(@"%@",result);    //你好

• JS调用OC中不带参数的block

    JSContext * ctx = [[JSContext alloc] init];
    
    ctx[@"eat"] = ^(){
        NSLog(@"eatsome");
    };
    NSString * jsCode = @"eat()";
    
    [ctx evaluateScript:jsCode];

• JS调用OC中带参数的block

    JSContext * ctx = [[JSContext alloc] init];
    ctx[@"eat"] = ^(){
        NSArray * arguments = [JSContext currentArguments];
        NSLog(@"eat%@",arguments[0]);
    };
    
    NSString * jsCode = @"eat('food')";
    [ctx evaluateScript:jsCode];

• 通过JS调用OC自定义类

    Person * p = [[Person alloc] init];
    p.name = @"zz";
    
    JSContext * ctx = [[JSContext alloc] init];
    ctx[@"person"] = p;
//    NSString * jsCode = @"person.playGame('lol','night')";
    NSString * jsCode = @"person.play()";
    
    [ctx evaluateScript:jsCode];

Person文件.h

#import 

@protocol PersonJSExport 

@property (nonatomic, strong)NSString * name;

- (void)play;

// 调用多个参数的方法，JS函数命名规则和OC还不一样，很可能调用不到对应的JS生成的函数，为了保证生成的JS函数和OC方法名一致，OC提供了一个宏JSExportAs，用来告诉JS应该生成什么样的函数对应OC的方法，这样就不会调错了。

// PropertyName:JS函数生成的名字
// JS就会自动生成playGame这个方法
JSExportAs(playGame, - (void)playWithGame:(NSString *)game time:(NSString *)time);

@end

@interface Person : NSObject 

@property (nonatomic, strong) NSString *name;


- (void)playWithGame:(NSString *)game time:(NSString *)time;

Person.m

- (void)play {
    NSLog(@"%@玩",_name);
}
- (void)playWithGame:(NSString *)game time:(NSString *)time
{
    NSLog(@"%@在%@玩%@",_name,time,game);
}

• JS调用OC系统类

@protocol UILabelJSExport 

@property (nonatomic, strong)NSString * text;

@end
#pragma mark - JS调用OC系统类
- (void)jsCallOCSystemClass {
    
    class_addProtocol([UILabel class], @protocol(UILabelJSExport));
    
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(50, 50, 100, 100)];
    [self.view addSubview:label];
    
    JSContext * ctx = [[JSContext alloc] init];
    ctx[@"label"] = label;
    
    NSString * jsCode = @"label.text = 'hello '";
    
    [ctx evaluateScript:jsCode];
    
}

• js点击事件调用原生方法

#import 


@protocol HXJSExport 
- (void)ClickJsButton:(NSString *)jsonString;
@end

@interface ViewController : UIViewController 

@property (strong, nonatomic) JSContext *context; //js交互的类

@end

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    //原生套入JS
    self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    // 以 JSExport 协议关联 native 的方法
    self.context[@"Person"] = self;
}
- (void)ClickJsButton:(NSString *)jsonString{
    NSLog(@"js回调");
}