现在的混合开发越来越多了,所以原生和JS之间的交互也会被广泛用到,下面就分析下使用JS和WKWebView之间的交互:
一、OC调用JS
(1)oc代码
// ocCallJS: js里面的方法
// data:oc传给js的参数
// backData:js里面ocCallJS方法的返回值
[self.webView evaluateJavaScript:@"ocCallJS('data')" completionHandler:^(id _Nullable backData, NSError * _Nullable error) {
}];
(2)js代码
methods: {
ocCallJS(data) {
alert(data)
var backData = 'js回调给原生的值'
return backData;
},
}
vue注意:需要在mounted里面实现window.ocCallJS = this.ocCallJS
二、JS调用OC
(1)oc代码
-(void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[_webView.configuration.userContentController addScriptMessageHandler:self name:@"jsCallOC"];
}
-(void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated];
[_webView.configuration.userContentController removeScriptMessageHandlerForName:@"jsCallOC"];
}
// 当js调用jsCallOC方法会执行这个方法,message为js传的参数
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
}
注意:addScriptMessageHandler和removeScriptMessageHandlerForName需要成对出现,否则会造成原生界面不能被销毁问题
(2)js代码
window.webkit.messageHandlers.jsCallOC.postMessage(message);
网友评论