首页 >iOS开发

JavaScriptTalkNativeEasy (简化javaScript和iOS native的交互)

2018-01-09 11:09 编辑: yyuuzhu 分类:iOS开发 来源:JMan_

目前javaScrip和iOS native进行交互的时候,主要是有两种方式,第一种是通过Apple提供的API进行调用native 代码(UIWebView 使用JavaScriptCore框架、WKWebView使用WebKit框架),第二种就是通过URL重定向(通过URL向native端传送数据,native根据定义的规则进行解析。)。目前比较流行的开源框架是WebViewJavascriptBridge,此框架其实是基于URL重定向和javaScript回调机制来完成js同iOS native交互的。当js和native交互比较多的时候,通过以上方法实现交互,代码会很难被管理和查看。JavaScriptTalkNativeEasy 可以简化这一流程,使每个回调响应的独立开,分开来处理。demo 地址如下:JavaScriptTalkNativeEasy,可以用过pod 引入到工程。

1、使用Apple原生API 进行js和 native叫。

  • UIWebView

UIWebView 主要使用 javaScriptCore 框架。使用时需要导入#import

此头文件中主要包含以下几个类:

(1) JSContext是JavaScript 的运行上下文,他主要作用是执行js代码和注册native方法接口。

(2) JSValue是JSContext 执行后的返回结果,他可以是任何js类型(具体类型可以通过JSValue的API进行判断,如:@property (readonly) BOOL isNumber;),并且都有对象的方法转换为native对象。

(3) JSManagedValue 是JSValue的封装,用它可以解决js和native之间循环引用的问题。

(4) JSVirtualMachine js虚拟机,管理JS运行时和管理js暴露的native对象的内存。

(5) JSExport 是一个协议,通过实现它可以完成把一个native对象暴漏给js,此协议内容是空的,但是如果想把自定的model数据传递给js需要实现此协议。

JSContext 在使用时不需要自己创建,需要通过JSContext *jsContext = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];获取当前UIWebView 的JSContext。

具体使用过程如下:




    
    


    

 JavaScriptTalkNativeEasy

    
    JS call native

natvie 端:

jsContext[@"helloNative"]=^(NSString *argument){
    NSLog("%@",argument);
};

当点击h5中的 'JS call native' Button的时候,上边的block回调,同事参数也会传到argument中,其实block参数完全可以写成void, 然后通过NSArray *currentArguments = [JSContext currentArguments];,如下:

NSArray *currentArguments = [JSContext currentArguments]; // 存放js传入的参数 array
for argument in currentArguments{
    NSLog(@"%@",argument); // argument JSValue 实例
}

使用JavaScripCore 的JSContext 注册js调用native的时候,当页面重新reload之后,JSContext实例会发生变化,此时需要在UIwebView的代理方法```objc- (void)webViewDidStartLoad:(UIWebView *)webView ``中重新获取JSContext,并且注册对象的回调block。

  • WKWebView

WKWebView 主要使用的是WebKit框架,主要是用WKWebView中WKUserContentController类型的实例对象,userContentController太处理js调用native。主要使用的方法为- (void)addScriptMessageHandler:(id )scriptMessageHandler name:(NSString *)name;,name字段 是js端对应的函数名称,scripMessageHandeler是处理js回调的实例,必须实现WKScriptMessageHandler协议中的- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;。message对一个WKScriptMessage实例,其body字段保存了js传递给native的数据。获取此字段进行相应的处理。具体使用如下:

@interface WKViewController : UIViewController
@end
WKUserContentController *userContentController = _wkWebView.configuration.userContentController;
[userContentController addScriptMessageHandler:self name:@"helloNative"];
@implementation WKViewController
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    // message.body js传过来的参数
    NSLog(@"%@",NSStringFromClass([message.body class]));
}
@end

在使用 WKWebView调用navite时,不能获取native返回的参数,如果想在调用完native之后对js回传参数,只能通过native端调用对应的js 函数,把要返回的值返回给js,如下:

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    // message.body js传过来的参数
    //  数据解析完后
    User *user = {@"name":@"univex",@"age":@100};
    [_webView evaluateJavaScript:[NSString stringWithFormat:@"getUserInfo('%@')",user] completionHandler:^(id _Nullable response, NSError * _Nullable error) {
                }];
}
js 中必须有对应的getUserInfo 方法进行处理。WKWebView 在页面重新reload之后不需要做额外的操作,之前注册过的回调还能继续响应,这点感觉比UIWebView有好多。
  • WebViewJavascriptBridge 的使用,github上介绍的很详细了,地址:WebViewJavascriptBridge----个人认为WebViewJavScriptBridge使用还是挺麻烦的。

在业务比较多的时候使用原生的的方法不进行任何的封装,当回调业务比较的多的时候,代码就会变的很臃肿。

为此,笔者在基于原生方法上,封装出了一个JavaScripTalkNativeEasy库,此库可以把js调原生的代码放到指定的代理类中,此类只需实现 JavaScriptTalkNativeEasyProtocol 协议,需要回调的方法需要在协议中声明,JavaScripTalkNativeEasy 会自动注册对应的回调函数,然后在js调用时,传送到对应的代理实例中。使用案例如下:

UIWebView 使用JavaScripTalkNativeEasy

#import 
#import "JavaScriptTalkNativeEasyProtocol.h"
@protocol webJSEasyProtocol
-(NSString*)helloNative;//  协议中的方法名必须和js中对应的方法保持一致
@end
@interface JSTNViewController : UIViewController
@end
#import "JSTNViewController.h"
@interface JSTNViewController ()
@property(nonatomic, strong)JavaScriptTalkNativeEasy *jsTNEasy;
@property(nonatomic, strong)UIWebView *webView;
@end
@implementation JSTNViewController
- (void)viewDidLoad {
    [super viewDidLoad];
     _webView = [[UIWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    [self.view addSubView:_webView];
    
    _jsTNEasy = [JavaScriptTalkNativeEasy jsTNEasy:webView];
    _jsTNEasy.delegate = self;// 如果delegate 不设置不会注册任何的回调
    NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
    NSString* exampleHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
    NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
    [_webView loadHTMLString:exampleHtml baseURL:baseURL];
}
-(NSString *)helloNative{
     
     return @"Hello JavaScript"; 
     // 此数据会返给js端,当js调用helloNative函数时,可以通过var hello = helloNative() 的方式来获取。js可以接受的类型有int、long、float、double、NSString、NSArray、NSDictionary。javaScriptCore 会自动处理对应的数据。
}
@end

WKWebView 使用JavaScripTalkNativeEasy

#import 
#import "JavaScriptTalkWKNativeEasy.h"
@protocol WKWebJSEasyProtocol
-(NSString *)helloNative;
@end
@interface WKViewController : UIViewController
@end
#import "WKViewController.h"
#import 
#import 
@interface WKViewController ()
@property(nonatomic, strong)WKWebView *webView;
@property(nonatomic, strong)JavaScriptTalkWKNativeEasy *jsTNEasy;
@end
@implementation WKViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    
   
    
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    _webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
    [self.view addSubview:_webView];
    configuration.preferences.javaScriptEnabled = YES;
    
    configuration.preferences.javaScriptCanOpenWindowsAutomatically = NO;
    
    NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"index_wk" ofType:@"html"];
    NSString* exampleHtml = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
    NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
    [_webView loadHTMLString:exampleHtml baseURL:baseURL];
    _webView.navigationDelegate = self;
    _webView.UIDelegate = self;
    _jsTNEasy = [JavaScriptTalkWKNativeEasy jsTNEasy:_webView];
    _jsTNEasy.delegate = self;
    _jsTNEasy.smhDelegate = self;
  
}
-(NSString *)helloNative{
     
     return @"Hello JavaScript"; 
     // 此数据会返给js端,当js调用helloNative函数时,可以通过var hello = helloNative() 的方式来获取。js可以接受的类型有int、long、float、double、NSString、NSArray、NSDictionary。javaScriptCore 会自动处理对应的数据。
}

WKWebView和UIWebView的使用基本上是一直的。 但是在js端的处理是不一样的,由于是基于苹果原生的API进行封装的,所有要苹果API的规则进行才处理。在使用WKWebView中如果想获取Native端的回传的数据,js必须告告诉Native对的回调函数的名称,方法如下:

如果app的系统支持是iOS8+,建议UIWebView替换成WKWebView,WK在性能上做了很大的优化,而且在WK和JS的交互中,当页面reload后不需要重新注册对应的回调函数。Github地址:JavaScriptTalkNativeEasy 欢迎使用,如果在使用的过程中有任何问题、批评、建议,可以email笔者。winerdt@163.com

作者:JMan_

链接:https://www.jianshu.com/p/36cc483211ed

搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:研究人员公开披露macOS 0-day漏洞详情,利用该漏洞可完全接管系统
下一篇:倒计时设计
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部