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

米元凯

2023-12-01

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

目前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 <JavaScriptCore/JavaScriptCore.h>
此头文件中主要包含以下几个类：
(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。

具体使用过程如下：

<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
</head>

<body>
    <h1> JavaScriptTalkNativeEasy</h1>
    <div id='log'></div>
    <button type="button" onclick="helloNative('Hello iOS native')" style="width:100%; height:30px;" />JS call native</button>
</body>

</html>

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 <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;,name字段是js端对应的函数名称，scripMessageHandeler是处理js回调的实例，必须实现WKScriptMessageHandler协议中的- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;。message对一个WKScriptMessage实例，其body字段保存了js传递给native的数据。获取此字段进行相应的处理。具体使用如下：


@interface WKViewController : UIViewController<WKScriptMessageHandler>

@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 <UIKit/UIKit.h>
#import "JavaScriptTalkNativeEasyProtocol.h"

@protocol webJSEasyProtocol<JavaScriptTalkNativeEasyProtocol>
-(NSString*)helloNative;//  协议中的方法名必须和js中对应的方法保持一致
@end

@interface JSTNViewController : UIViewController
@end

#import "JSTNViewController.h"
@interface JSTNViewController ()<UIWebViewDelegate,webJSEasyProtocol>
@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 <UIKit/UIKit.h>
#import "JavaScriptTalkWKNativeEasy.h"

@protocol WKWebJSEasyProtocol<JavaScriptTalkNativeEasyProtocol>
-(NSString *)helloNative;
@end

@interface WKViewController : UIViewController

@end

#import "WKViewController.h"
#import <WebKit/WebKit.h>
#import <JavaScriptCore/JavaScriptCore.h>
@interface WKViewController ()<WKScriptMessageHandler,WKNavigationDelegate,WKUIDelegate,WkWebJSEasyProtocol>
@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对的回调函数的名称，方法如下：

<script>
        function callBack(name){
            document.write(name.name)
            document.write('<br>')
            document.write(name.age)

        }

        function test() {
            window.webkit.messageHandlers.showName.postMessage({'a':123,'callBackFromNative':'callBack'});
            // callBack 是对应处理Native端回传数据的函数名，postMessage必选发送的是一个map类型的数据，回调函数在map对应的key必须是'callBackFromNative'

        }

    </script>

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

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

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

UIWebView 使用JavaScripTalkNativeEasy

WKWebView 使用JavaScripTalkNativeEasy

相关阅读

相关文章

相关问答

相关文档