iOS WKWebview JS与OC互相调用，传递数据

前言：
WKWebView是一个展示交互式web内容的视图，支持iOS8.0及macOS10.10以上的系统。提供了替换UIWebView的组件， WKWebView解决了UIWebView加载速度慢，占用内存多，优化困难等问题，可以说WKWebView是目前App内部加载网页的最佳选择。

 

目录

1.JS 与 OC 交互

 2.OC 向 JS 传递值

---

1.JS 与 OC 交互

添加注入JS 的方法

//注册一个name为jsToOcNoPrams的js方法 设置处理接收JS方法的对象
[wkUController addScriptMessageHandler:weakScriptMessageDelegate  name:@"JSToOcNoPrams"];

 [wkUController addScriptMessageHandler:weakScriptMessageDelegate  name:@"JSToOcWithPrams"];

JS 端代码示例

<!--        JS语法-->
    <script type = "text/javascript">
        
    function JSToOcFunction1()
    {
       window.webkit.messageHandlers.JSToOcNoPrams.postMessage({});
    }
    
    function JSToOcFunction2()
    {
        window.webkit.messageHandlers.JSToOcWithPrams.postMessage({"params":"我是参数"});
    }

懒加载生成一个 webView

- (WKWebView *)webView {
    if (_webView == nil) {
        _userContentController = [[WKUserContentController alloc] init];
        
        _config = [[WKWebViewConfiguration alloc]init];
        _config.userContentController = _userContentController;
        _config.allowsInlineMediaPlayback = YES;
        
        WKPreferences *preferences = [WKPreferences new];
        preferences.javaScriptCanOpenWindowsAutomatically = YES;
        preferences.minimumFontSize = 12.0;
	 _config.preferences = preferences;

			 //这个类主要用来做native与JavaScript的交互管理
		 WKUserContentController * wkUController = [[WKUserContentController alloc] init];
			 //注册一个name为jsToOcNoPrams的js方法 设置处理接收JS方法的对象
		 [wkUController addScriptMessageHandler:weakScriptMessageDelegate  name:@"jsToOcNoPrams"];
		 [wkUController addScriptMessageHandler:weakScriptMessageDelegate  name:@"jsToOcWithPrams"];

		 _config.userContentController = wkUController;

		 _webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:_config];
		 _webView.UIDelegate = self;
		 _webView.navigationDelegate = self;
		//_webView.opaque = NO;
		 _webView.backgroundColor = [UIColor whiteColor];
		_webView.allowsBackForwardNavigationGestures = YES;/// 是否允许手势左滑返回上一级, 类似导航控制的左滑返回
		// 设置没有弹性
		_webView.scrollView.bounces = NO;

    }
    return _webView;
}

代理方法拿到到 JS 的数据

#pragma mark - WKScriptMessageHandler
//实现js注入方法的协议方法
- (void)userContentController:(WKUserContentController *)userContentController
      didReceiveScriptMessage:(WKScriptMessage *)message {

    NSLog(@"JS方法名:%@", message.name);
    NSLog(@"JS参数:%@", message.body);
    //找到对应js端的方法名,获取messge.body
    if ([message.name isEqualToString:@"JSToOcNoPrams"]) {

    // 根据传过来的值处理逻辑、跳转页面等等
    HikRealplayViewController *vc = [[HikRealplayViewController alloc]init];
	vc.title = message.body[@"title"];
	[self.navigationController pushViewController:vc animated:YES];
    
       
    }
}

 2.OC 向 JS 传递值

#pragma mark - WKNavigationDelegate

// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    NSLog(@"加载结束");

	NSString *jsStr = [NSString stringWithFormat:@"ocSetDeviceCode('%@')",[ZJPNetWork getUUID]];

	[self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
		NSLog(@"%@--%@",result,error);
	}];
}

@"ocSetDeviceCode('%@')",[ZJPNetWork getUUID]] , ocSetDeviceCode是方法名称，('%@')表示参数

2. JS端获取传递值代码实现实例

    function ocSetDeviceCode(value){
           // 此处 js接受到值
     }