总结原生与H5交互相关

2017-12-27 本文已影响436人 HuberyQing

现在很多需求需要原生和H5的深入交互，在我经历的项目中见过的方法有四五种，但是我经常使用的方式有两种，我觉得这两种可以满足大部分开发者的需求。

利用 WKWebView 进行交互 (系统 API)
oc 第三方 WebViewJavascriptBridge

一、我先带大家了解一下通过系统API如何进行交互，和交互的生命周期。
WKWebView 的创建

- (WKWebView *)webView {
    if (!_webView) {
        //初始化WKWebViewConfiguration
        WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
        /**
         设置代理对象
         ScriptMessageHandler:WKScriptMessageHandler的代理对象
         name:跟后端协调好的响应名称
        **/
        [config.userContentController addScriptMessageHandler:self name:@"methodName"];

        _webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT - 64) configuration:config];
        
        [_webView  loadRequest:[ NSURLRequest requestWithURL:url]];
        
        _webView.navigationDelegate = self;
    }
    return _webView;
}

在这段代码中，我们设置了两个代理，所以应该遵守代理协议，分别是 WKNavigationDelegate 和 WKScriptMessageHandler，两个代理方法的具体实现会在下文进行说明。这里特别说明 WKScriptMessageHandler 代理对象的设置并不是使用点语法的形式，而是在初始化 webView 的时候先初始化 WKWebViewConfiguration 类型的对象 config，然后使用 - (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration 方法设置代理。

WKNavigationDelegate
这个代理我用到的代理方法比较简单有三个如下，其他的代理方法也有很多文章进行说明，我就不再赘述。

// 页面开始加载时调用

- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
}

// 页面加载完成之后调用

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
}

// 页面加载失败时调用

- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation {
}

WKScriptMessageHandler（JS 调用原生）
在看这个代理方法之前，我们首先回顾一下 webView 的创建时调用的一句代码

[config.userContentController addScriptMessageHandler:self name:@"methodName"];
在创建 config 对象时，我们给他绑定一个名为 methodName 的方法，而这个方法就是和 H5 同事协定好的用来交互的方法的方法名，里面可以通过传参来确定接下来进行何种交互，而交互的代码就写在代理方法里面，接下来看看代理方法。

- (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message {
          NSString *messageStr = [NSString stringWithFormat:@"%@",message.body];
}

这里的 message 是 js 调用 methodName 方法回传的信息，我们可以在代理方法中通过解析 message 得到和 H5 协定好的特殊标识来进行交互。当然你必须在 js 的代码中写如下代码才能保证交互成功（PS：这是 H5 中的 JS 代码）。

window.webkit.messageHandlers. methodName.postMessage()
我个人认为这样的交互方式其实跟 UIWebView 通过截取字符串的交互方式有些类似，都是通过和前端协定好的特殊标识符来执行所对应的交互内容，举个例子，一个 H5 中有两个按钮，点击第一个按钮跳转控制器 A，第二个按钮跳转控制器 B，那 H5 人员在处理按钮 A 和 B 的交互事件的地方分别写下如下代码

window.webkit.messageHandlers. methodName.postMessage(pushVcA)
window.webkit.messageHandlers. methodName.postMessage(pushVcB)
我们 iOS 端在代理方法中写下如下代码

- (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message {
          NSString *messageStr = [NSString stringWithFormat:@"%@",message.body];
          if (messageStr isEqualToString:@"pushVcA") {
                 //跳转控制器A
          }
          if (messageStr isEqualToString:@"pushVcB") {
                //跳转控制器B
          }
}

这只是一个简单的交互场景举例，但是 JS 调用原生方法就是在这个代理方法中实现。接下来讲一下原生如何调用 JS 方法。

原生调用 JS
原生调用 JS 需要用到 WKWebView 的方法

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler
我的使用方式为

    NSString *startStr = @"startUploadImgCB('start')";
    [self.webView evaluateJavaScript:startStr completionHandler:^(id _Nullable response, NSError * _Nullable error) {
        NSLog(@"value: %@ error: %@", response, error);
    }];

这里的 startUploadImgCB 即为 JS 写好的方法，start 是我传给 JS 的参数，目的是告诉 JS 原生开始上传图片，开始上传动画。注意这个方法要跟上文中约定好的交互方法 methodName 方法区分开，methodName 是 JS 调用原生的方法名，而 startUploadImgCB 是原生调用 JS 的方法名。

二、 oc 第三方 WebViewJavascriptBridge

<pre>

iOS 与 HTML5 的交互方式

iOS 与 H5 的交互方式大概有以下 5 种:

利用 WKWebView 进行交互 (系统 API)
利用 UIWebView 进行交互 (系统 API)
苹果的 javascriptcore.framework 框架;
跨平台 cordova 框架;
第三方 WebViewJavascriptBridge

本篇文章就来讲讲 WebViewJavascriptBridge 的简单使用。

WebViewJavascriptBridge 的使用

在 Github 上下载WebJavaScriptBridge
解压缩包, 将WebViewJavascriptBridge文件夹拖到你的工程中
在需要使用WebViewJavascriptBridge的类文件中引入头文件WebViewJavascriptBridge.h

使用方式

HTML 页面中需要完成的工作

1. 在 HTML 文件中添加下方代码, 这段代码是固定的, 必须添加的：

function setupWebViewJavascriptBridge(callback) {
                if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
                if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
                window.WVJBCallbacks = [callback];
                var WVJBIframe = document.createElement('iframe');
                WVJBIframe.style.display = 'none';
                WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
                document.documentElement.appendChild(WVJBIframe);
                setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
            }

2. 设置 JS 与 OC 交互时的命令字：

//              无参数时,用下列方式
                window.WebViewJavascriptBridge.callHandler('Set')
//              单个参数时,用下列方式
//              window.WebViewJavascriptBridge.callHandler('Set','参数')
//              多参数时,用下列方式
//              window.WebViewJavascriptBridge.callHandler('Set', {'参数1': '111', '参数

3. 设置 OC 与 JS 交互时的接收方法与命令字：

setupWebViewJavascriptBridge(function(bridge) {
                bridge.registerHandler('Get', function(data, responseCallback) {
                alert(data);
                })
            })

OC 控制器中需要完成的工作

1. 向控制器中引入文件WebViewJavascriptBridge.h

2. 加载 HTML 文件

[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"WebViewJavascriptBridgeDemo" ofType:@"html"]]]];

3. 初始化 WebViewJavascriptBridge

@property (nonatomic, strong) WebViewJavascriptBridge *bridge;
...
self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
//    若要实现WebViewDelegate要添加这句绑定代码
//    [self.bridge setWebViewDelegate:self];

4. 根据命令字设置 JS 发数据给 OC 的方法

[self.bridge registerHandler:@"Set" handler:^(id data, WVJBResponseCallback responseCallback) {
       //这里的data为JS发送给OC的数据
    }];

5. 根据命令字设置 OC 发数据给 JS 的方法

[self.bridge callHandler:@"Get" data:@"OC已接受"];

如果后期需要我会继续把例如 UIWebView....等其他方式进行添加总结