越来越多的项目中使用Native和网页的混合开发，这使得纯客户端工作大大减轻。随着手机硬件的提升，软件卡顿问题也会越来越小。之前做web端交互的时候，用的WebViewJavascriptBridge的库，这个库十分强大，只是oc端和web端定好function的名称，就可以互通消息，但本篇只记录WKWebView原生代码交互，如果有错误，还请指教。
- 加载本地html
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
config.preferences.minimumFontSize = 18;
self.wkWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height/2) configuration:config];
[self.view addSubview:self.wkWebView];
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL *baseURL = [[NSBundle mainBundle] bundleURL];
[self.wkWebView loadHTMLString:[NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil] baseURL:baseURL];
- OC端接收来着JS端发送的消息
WKUserContentController,遵守@protocol WKScriptMessageHandler协议
// config.userContentController 点击去看到这属性是: 就是把前面这个和web视图联系起来
WKUserContentController *userCC = config.userContentController;
//JS调用OC 添加处理脚本
/*! @abstract Adds a script message handler.
@param scriptMessageHandler The message handler to add.
@param name The name of the message handler.
@discussion Adding a scriptMessageHandler adds a function
window.webkit.messageHandlers.<name>.postMessage(<messageBody>) for all
frames.
*/
[userCC addScriptMessageHandler:self name:@"showMobile_qin"];
[userCC addScriptMessageHandler:self name:@"showName"];
[userCC addScriptMessageHandler:self name:@"showSendMsg"];
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
NSLog(@"userScripts:%@",userContentController.userScripts);
NSLog(@"name:%@,,body:%@",message.name,message.body);
if ([message.name isEqualToString:@"showSendMsg"]) {
NSDictionary *dic = message.body;
NSString *info = [NSString stringWithFormat:@"message是:%@",dic[@"message"]];
NSLog(@"info:%@",info);
}
}
- html端
这是html互通消息端固定的格式写法
window.webkit.messageHandlers.<name>.postMessage(<messageBody>) for all
// JS代码 事件列表
function btnClick() {
var dic = {"message": "JS发消息给OC", "ls": "李四1" };
window.webkit.messageHandlers.showSendMsg.postMessage(dic);
}
至此，js可以响应来自客服端的事件，而oc去响应的js端的事件更加简单。
OC代码
[self.wkWebView evaluateJavaScript:@"alertSendMsg('OC端','呼唤')" completionHandler:^(id _Nullable other, NSError * _Nullable error) {
NSLog(@"other:%@,error:%@",other,error);
}];
- html代码
<script>
function alertSendMsg(num,msg) {
document.getElementById('demo').innerHTML = '已接收' + num + ',' + msg + '!!'
}
</script>
OK，大概就是这样，这个demo中，没有多么负责的功能，但是js 和oc 互通消息已经能做到了。
