iOS和h5交互(WKWebView,UIWebView)

app 混合开发场景中常常涉及到h5 和原生数据通信，大致分为2类一个是原生向 h5 主动通信，一个是 h5 主动向原生通信。
iOS 中加载h5的控件有2种，UIWebView 和 WKWebView,目前新提交的app 必须使用WKWebView 才能提交审核。已经上架审核成功的app 目前没有强制要求必须用WKWebView。

UIWebView 与H5 通信

h5 调用原生

原生通过监听url 变化实现，当url 变化的时候 ,会触发

(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType，比如现在有个需求，h5 要通知原生打开照相机（通过原生可以自定义相机）
原生主要逻辑如下

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    NSString *url = request.URL.absoluteString;
    if ([url containsString:@"opencame"]) {
        NSLog(@"打开 照相机");
        return NO;
    }
    NSLog(@"url is %@",request.URL.absoluteString);
    return YES;
}

h5 主要逻辑如下

<div>
  <p onClick={()=>{
    window.location.href = "opencame://data=1"
            }}>打开照相机
  </p>
</div>

除了通过url 变化的监听外，我们还有其他方法，比如通过 JSContext 向webView 注入。具体步骤如下
原生逻辑：
第一步：新建1个继承 JSExport 的代理，新建1个继承该协议的类，协议中 opencame 为和前端约定好的通讯方法

@protocol CTH5Bride<JSExport>
-(void)opencame:(NSString*)msg;
@end

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

第二步：webview 加载成功后，在 - (void)webViewDidFinishLoad:(UIWebView *)webView 注入,注入对象名称为 cth5bridge

- (void)webViewDidFinishLoad:(UIWebView *)webView{ //尝试失败
    JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    CTH5Bride *bridge = [CTH5Bride new];
    bridge.delegate = self;
    context[@"cth5bridge"] = bridge;
}

第三步：h5 调用方式如下，cth5bridge 为注入对象名称，opencame 为约定的方法

    opencame(){
        cth5bridge.opencame(JSON.stringify({data:'cheng'}))
        opencame()
    }

原生调用h5

假设1个场景，用户访问h5 界面情况下，我们要通知用户token 要更新
原生主要逻辑

-(void)updateToken{//用户 token 更新
    NSString *str = @"updatetoken('123')";
    [self.webView stringByEvaluatingJavaScriptFromString:str];
}

h5 主要逻辑

 window.updatetoken =function (str) {
  //原生通知 h5 ，用户信息 token 更新
 }

WKWebView 与H5 通信

H5 调用原生

假设1个场景，用户点击1个活动baner,通知原生以一个新的界面打开1个外部活动h5界面
和上面类似，我们也可以在 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler 通过监听 url 变化来实现
原生主要逻辑

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    NSString *str = navigationAction.request.URL.absoluteString;
    if([str hasPrefix:@"showH5"]){
        //打开h5
    }
    decisionHandler(WKNavigationActionPolicyAllow);;
}

h5 主要逻辑

<div>
  <p onClick={()=>{
    window.location.href = "showH5://data=1"
            }}>打开照相机
  </p>
</div>

我们也可以这么做
第一步原生注册监听方法 showH5

///初始化 webview，设置配置项
-(WKWebView*)webView{
    if (!_webView) {
         _webView = [[WKWebView alloc] initWithFrame:self.bounds configuration:self.registConfiguration];
        _webView.UIDelegate = self;
        _webView.navigationDelegate = self;
        if (@available(iOS 11.0, *)) {
            _webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
        } else {
        }
        // 是否允许手势左滑返回上一级, 类似导航控制的左滑返回
        _webView.allowsBackForwardNavigationGestures = YES;
        NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://10.100.12.228:8088/#/"]
                                                 cachePolicy:NSURLRequestReloadIgnoringLocalAndRemoteCacheData
                                             timeoutInterval:30];
        [_webView loadRequest:request];
    }
    return _webView;
}

- (WKWebViewConfiguration *)registConfiguration{
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    configuration.userContentController = [WKUserContentController new];
    //注入js 方法
    NSArray *methodArr = @[@"showH5"];//这里要事先注入 和 h5 约定的方法名称
    [methodArr enumerateObjectsUsingBlock:^(NSString *methodStr, NSUInteger idx, BOOL * _Nonnull stop) {
        [configuration.userContentController addScriptMessageHandler:self name:methodStr];
    }];
    WKPreferences *preferences = [WKPreferences new];
    preferences.javaScriptCanOpenWindowsAutomatically = YES;
    configuration.preferences = preferences;
    return configuration;
}

第二步 H5 调用和原生约定好的方法 showH5，h5 处理的时候要区分 iOS 和 android，下面只是考虑iOS

 if(window.webkit){
   window.webkit.messageHandlers.showH5.postMessage(JSON.stringify({"url":"www.baidu.com"}));
 }

第三步原生在 - (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message 进行监听

// 监听h5 调用原生
- (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message {
    NSString *jsonString= message.body;
    NSData *jsonData = [jsonString dataUsingEncoding:NSUTF8StringEncoding];
    NSError *err;
    NSDictionary *dic = [NSJSONSerialization JSONObjectWithData:jsonData
                                                        options:NSJSONReadingMutableContainers
                                                          error:&err];
    if ([message.name isEqualToString:@"showH5"]){//在新界面打开h5
        NSLog(@"%@",message.body);
    }
}

原生调用H5

和上面类似，假设1个场景通知H5 刷新用户token
updatetoken 是和前端H5 约定好的通信方法，123是传递的数据，一般以 json 字符串传递
原生主要逻辑

NSString *str = @"updatetoken('123')";
[self.webView evaluateJavaScript:str completionHandler:^(id _Nullable complete, NSError * _Nullable error) {
    if (complete) {
    }
}];

H5主要逻辑
需要在windows 上绑定方法

window.updatetoken =function (str) {
  //原生通知 h5 ，用户信息 token 更新
  window.data = str;
}

参考链接：https://blog.csdn.net/dolacmeng/article/details/79623708