iOS与JS交互的4种方法

WKWebView 和 UIWebView

iOS8 以后,苹果推出了新框架 Wekkit ,提供了替换UIWebView的组件WKWebView。使用WKWebView,速度会更快,占用内存少。

WKWebView的特性:

  • 在性能、稳定性、功能方面有很大提升,直观体现是内存占用变少;
  • 允许JavaScript的Nitro库加载并使用(UIWebView中限制);
  • 支持了更多的HTML5特性;
  • 高达60fps的滚动刷新率以及内置手势;
  • 将UIWebViewDelegate与UIWebView重构成了14类与3个协议(详见SDK);

iOS与JS交互的方法:

1.拦截url(适用于UIWebView和WKWebView)
2.JavaScriptCore(只适用于UIWebView,iOS7+)
3.WKScriptMessageHandler(只适用于WKWebView,iOS8+)
4.WebViewJavascriptBridge(适用于UIWebView和WKWebView,属于第三方框架)

下面以假设的需求进行示例代码讲解,需求:
(1)h5页面调用原生扫二维码(h5调用原生)
(2)原生扫码成功后,将结果返回给h5(原生调用h5)

1. 拦截url

(1)web调用原生:

  1. 和后端同事协定好协议,如 jxaction://scan表示启动二维码扫描,jxaction://location表示获取定位。
  2. 实现 UIWebView 代理的 shouldStartLoadWithRequest:navigationType: 方法,在方法中对url进行拦截,如果是步骤 <1> 中定义好的协议则执行对应原生代码,返回false,否则返回true继续加载原url。
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    if ([request.URL.absoluteString hasPrefix:@"jxaction://scan"]) {
        //调用原生扫描二维码
       return NO;
    }
    return YES;
}

(2)原生调用 js

若(1)中扫描二维码结束后,需要把扫描结果返回给web页,直接调用UIWebView的 stringByEvaluatingJavaScriptFromString: 方法,或者WKWebView的 evaluateJavaScript:completionHandler: 方法。

[self.webView stringByEvaluatingJavaScriptFromString:@"scanResult('我是扫描结果~')"];

2. JavaScriptCore

方法一 Web 调用原生只适合简单的调用,如果要传递参数,虽然也可以拼接在url上,如 jxaction://scan?method=aaa,但是需要我们自行对字符串进行分割解析,并且特殊字符需要编码。在iOS7系统提供了JavaScriptCore,可以更优雅地实现 js 与原生的交互。

JavaScriptCore 是 Safari 的 JavaScript 引擎,在 iOS7 之后苹果开放了JavaScriptCore框架,开发者可以通过其提供的OC接口来使用JavaScriptCore。说白了就是它提供了执行JavaScript代码的能力,相当于一个JavaScript的虚拟机。JavaScriptCore是开源的,感兴趣可以研究一下:https://trac.webkit.org/browser/trunk/Source/JavaScriptCore

JavaScriptCore.h中包含了框架中几个比较重要的类:

#import "JSContext.h"      
#import "JSValue.h" 
#import "JSManagedValue.h"  
#import "JSVirtualMachine.h" 
#import "JSExport.h" 
  • JSContext 是JavaScript的运行上下文,他主要作用是执行js代码和注册native方法接口
  • JSValue是JSContext执行后的返回结果,他可以是任何js类型(比如基本数据类型和函数类型,对象类型等),并且都有对象的方法转换为native对象。
  • JSManagedValue是JSValue的封装,用它可以解决js和原声代码之间循环引用的问题
  • JSVirtualMachine 管理JS运行时和管理js暴露的native对象的内存
  • JSExport 是一个协议,通过实现它可以完成把一个native对象暴漏给js

(1)js 调用原生

  1. 新建类继承自NSObject(如AppJSObject)。
  2. h文件中声明一个代理并遵循 JSExport,代理内的方法和 js 定义的方法名一致。
  3. .m文件中实现 <2> 代理中对应的方法,可以在方法内处理事件或通知代理。
  4. 在 UIWebView 加载完成的代理中把 AppJSObject 实例对象类注入到 JS 中,那么在 js 中调用方法就会调用到原生 AppJSObject 实例对象中对应的方法了。

AppJSObject.h

#import <Foundation/Foundation.h>
#import <JavaScriptCore/JavaScriptCore.h>

@protocol AppJSObjectDelegate <JSExport>
-(void)scan:(NSString *)message;
@end

@interface AppJSObject : NSObject<AppJSObjectDelegate>
@property(nonatomic,weak) id<AppJSObjectDelegate> delegate;
@end

AppJSObject.m

#import "AppJSObject.h"

@implementation AppJSObject
-(void)scan:(NSString *)message{
    [self.delegate scan:message];
}
@end

h5代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
    
<input type="button" name="" value="扫一扫" onclick="scan()">
<br/>
<p id="result">扫描结果:</p>

<script type="text/javascript">
    //调用APP的扫描方法   h5->app
    function scan(){
        app.scan('scanResult');
    }
    
    //扫描结果回调方法    app->h5
    function scanResult(result){
        document.getElementById("result").innerHTML = '扫描结果:' + result;  
    }

</script>

</body>
</html>

把 AppJSObject 实例对象类注入到 JS 中:

-(void)webViewDidFinishLoad:(UIWebView *)webView
{
    JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    AppJSObject *jsObject = [AppJSObject new];
    jsObject.delegate = self;
    context[@"app"] = jsObject;
}

也可以通过block实现而不创建新类AppJSObject:

context[@"openAlbum"] = ^(){
    NSLog(@"js调用oc打开相册");
};

(2)原生调用 js
可以通过方法一中的方法,也可以通过JSContext

JSContext *context=[_mainWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *alertJS= [NSString stringWithFormat:@"%@('%@')",_photoMethod,fileUrl];
[context evaluateScript:alertJS];

3. WKScriptMessageHandler

现在很多 app 都是支持 iOS8+,很多人使用WKWebView代替了UIWebView,但是WKWebView并不支持方法二。此时我们可以使用WKWebView的WKScriptMessageHandler

  1. JS 与 iOS 约定好方法,用作 JS 在调用 iOS 时的方法,如 scan:
  2. iOS 使用 WKUserContentController 的 -addScriptMessageHandler:name:方法监听 name 为 scan 的消息;
  3. JS通过 window.webkit.messageHandlers. scan.postMessage() 的方式对scan 方法发送消息;
  4. iOS在-userContentController:didReceiveScriptMessage:方法中读取 name 为 scan 的消息数据 message.body。
- (void)setupWKWebView{
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    configuration.userContentController = [[WKUserContentController alloc] init];
    [configuration.userContentController addScriptMessageHandler:self name:@"scan"];

    WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
    webView.UIDelegate = self;
}

h5:

window.webkit.messageHandlers.scan.postMessage() 

实现WKScriptMessageHandler代理方法,当js调用scan方法时,会回调此代理方法:

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    if ([message.name isEqualToString:@"scan"]) {
        //调用原生扫码
     }
}

iOS调用JS方式与方法一中一致,都是通过 WKWebView 的 -evaluateJavaScript:completionHandler: 方法来实现的。

问题: 在使用WKWebView时与h5交互时,监听了h5的事件,让h5可以调用OC方法。退出页面后发现WKWebView没有被释放。

循环引用的原因
image.png
经典的解决方案

增加一个中间类去弱引用WKWebView,断开环即可。CMWebWeakScriptMessageDelegate的代码:

#import <Foundation/Foundation.h>
#import <WebKit/WebKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface CMWebWeakScriptMessageDelegate : NSObject<WKScriptMessageHandler>
@property (nonatomic, weak) id<WKScriptMessageHandler> scriptDelegate;
- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate;
@end

NS_ASSUME_NONNULL_END

#import "CMWebWeakScriptMessageDelegate.h"

@implementation CMWebWeakScriptMessageDelegate

- (instancetype)initWithDelegate:(id<WKScriptMessageHandler>)scriptDelegate {
    self = [super init];
    if (self) {
        _scriptDelegate = scriptDelegate;
    }
    return self;
}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    [self.scriptDelegate userContentController:userContentController didReceiveScriptMessage:message];
}

@end

4. WebViewJavascriptBridge 和 DSBridge

GitHub地址:

DSBridge-IOS
WebViewJavascriptBridge(ios)

可以参考一下这两个三方库的比较:
DSBridge vs WebViewJavascriptBridge

DSBridge 是H5页面与Native之间通信的桥梁,它有如下特点:

  1. 跨平台;同时支持ios和android。
  2. 双向调用;js可以调用native, native可以调用js
  3. 不仅支持 异步 调用,而且页支持 同步 调用(dsbridge是唯一一个支持同步调用的javascript bridge)
  4. 支持进度回调,多次返回(常用于文件下载进度、计时器等)
  5. Android支持腾讯x5内核
  6. 三端易用;无论是前端还是android或ios,使用都非常简单,极大的降低集成/学习成本

推荐阅读更多精彩内容