iOSWKWebView与HTML5的交互《一》讲解

设计方案与架构WKWebView与前端
本文只针对于WKWebView(系统API)
1.WKWebView(系统API)
题外话：
WKWebView优点：

• 更多的支持HTML5的特性
• 官方宣称的高达60fps的滚动刷新率以及内置手势
• Safari相同的JavaScript引擎
• 将UIWebViewDelegate与UIWebView拆分成了14类与3个协议(官方文档说明
• 另外用的比较多的，增加加载进度属性：estimatedProgress

缺点：
因为在js发送消息给native的时候，有时候需要通过回调来获取相应的信息，仅仅靠上面两个方法是没有办法满足的，也可能会有小伙伴说，先通过上面方法1发送消息个native然后，再使用方法2发送消息给js不就好了么，不行的，这样的话，js调用native方法时，和native发送消息时候并没有时间先后的约定，不能保证，js获取相关返回值的时候，一定能拿到值。

WKWebView与JS的交互方式
一，OC调用JS
调用苹果提供的api

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler
- 

使用方式：

与前端约定的函数，函数里面也可以包括给前端的数据
[self.wkWebView evaluateJavaScript:@"playSount()" completionHandler:nil];

JS部分：

function playSount() {
 //playSount...
}

二，JS调用OC
OC部分：
1.在创建wkWebView时，需要将被js调用的方法注册进去

//创建WKWebViewConfiguration文件
 WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
 config.preferences.minimumFontSize = 10.f;
 [config.userContentController addScriptMessageHandler:self name:@"playSound"];
//创建WKWebView类
 WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds configur
 

2.在WKScriptMessageHandler代理方法中监听js的调用

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
  
 if ([message.name isEqualToString:@"playSound"]) {
  [self playSound];
 }
}

JS部分：
//JS响应事件
function btnClick() {
window.webkit.messageHandlers.selectBank.postMessage(传给客户端数据);
}