OC与H5交互

1: WKWebView 与JS 原生交互

🍐OC调用H5方法,给H5传参

1: 首先引入头文件
  #import <JavaScriptCore/JavaScriptCore.h>     

 2: 设置 WKNavigationDelegate代理  并实现代理方法实现以下代码

    - (void)webView:(WKWebView*)webViewdidFinishNavigation:(WKNavigation*)navigation {

         //给H5的getInfo()方法传参
         NSString  *webFunctionStr = [NSStringstringWithFormat:@"getInfo('%@')",@"参数aaa"];
        //调用H5方法
        [webView evaluateJavaScript:webFunctionStr completionHandler:^(id_Nullableresult,NSError*_Nullableerror) {

            AX_LOG(@"%@---%@",error, result);
        }];
    }

🍐H5给OC传参

    //1: 创建网页配置对象
    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
   // 2:  (a)WKWebView注入ScriptMessageHandler设置代理方法self, (用于调用H5方法) 
    [config.userContentController addScriptMessageHandler:self name:@"H5_OC"];
  //3: 初始化WebView 
    _webView = [[WKWebView alloc]initWithFrame:CGRectMake(0,70, SCREEN_WIDTH, 1) configuration:config];


//实现ScriptMessageHandler代理方法
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    
  //5: message为H5传给iOS的参数
  NSDictionary *messageDic = message.body;
  NSLog(@"%@", messageDic);

  //mj解析参数(此处可以忽略)
  AXH5Model *model = [AXH5Model mj_objectWithKeyValues:messageDic];
  if([model.method isEqualToString:@"success"]) {
       AX_LOG(@"H5数据提交成功");
       [self.navigationController popViewControllerAnimated:YES];
   }
}

2: OC使用第三方 WebViewJavascriptBridge 与H5交互;
🍇:首先导入WebViewJavascriptBridge ( pod 'WebViewJavascriptBridge' 或者手动导入)

#import <WebViewJavascriptBridge.h>//导入桥接头文件

 //1: 初始化桥接, 建立 WebViewJavaScriptBridge 和 WebView 之间的关系
  _jsBridge = [WebViewJavascriptBridge bridgeForWebView:_webView];

🍇:OC调用H5方法, 给H5传参

NSString *riderAccount = "参数";

 // 调用 JS的 getInfo方法，并向 JS 传递 riderAccount 参数，但不需要 JSFunciton 的返回值。
 [_jsBridge callHandler:@"getInfo" data:riderAccount];

🍇: JS 调用 OC

// H5_Success :H5和OC统一注册的方法 data: 是 JS 传过来的参数内容;  responseCallback:OC 返回参数给 JS

 [_jsBridge registerHandler:@"H5_Success" handler:^(id data, WVJBResponseCallback responseCallback) {
            
            AX_LOG(@"dataFrom JS : %@",data);
               
            //OC返回"Success"参数 给H5
            responseCallback(@"Success");
            
            //解析H5返回的参数
            //做出处理
          
        }];

📢📢📢注意: 初始化下列桥接后存在 webView代理方法不执行的状态:

🌰解决办法一: 将代理方法写在初始化桥接代码的后面

//1: 初始化桥接, 建立 WebViewJavaScriptBridge 和 WebView 之间的关系
_jsBridge = [WebViewJavascriptBridge bridgeForWebView:_webView];
_webView.navigationDelegate = self;
 _webView.UIDelegate = self;

🌰解决方法二:添加桥接代码设置代理

_webView.navigationDelegate = self;
 _webView.UIDelegate = self;
//1: 初始化桥接, 建立 WebViewJavaScriptBridge 和 WebView 之间的关系
_jsBridge = [WebViewJavascriptBridge bridgeForWebView:_webView];
//桥接set设置代理
[_jsBridge setWebViewDelegate:self];

OC与H5交互

推荐阅读更多精彩内容