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