WKWebView 与H5 通信

2,535 阅读2分钟

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;
}