iOS開發 WKWebView實現JS交互

需求：利用webView加載H5頁面，並實現點擊H5頁面的按鈕觸發事件，事件是調用OC的方法。
簡單說就是JS調用OC的方法，這里我們選擇的是WKWebView，至於為什么不用UIWebView，自行百度或者看開發文檔。
實現：
1、首先應該倒入 WebKit 框架 #import <WebKit/WebKit.h>

2、懶加載一個webView

//需要的代理 <WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler> @property (nonatomic , strong) WKWebView *webView; - (WKWebView *)webView{ if (!_webView) { WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init]; _webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, NAVHEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT-NAVHEIGHT) configuration:config];
 if (@available(iOS 11.0, *)) {
            [configuration setURLSchemeHandler:self.handler forURLScheme:@"webImage"];
        } _webView.UIDelegate = self; _webView.navigationDelegate = self; NSURLRequest *request = [[NSURLRequest alloc]initWithURL:[NSURL URLWithString:self.structureUrl]]; [_webView loadRequest:request]; } return _webView; }

3、JS端的方法構成HTML代碼：

切記在html中預留接口，格式必須是固定的：

window.webkit.messageHandlers.actionName.postMessage('parameter'); actionName：為方法名 parameter：為傳遞過來的參數，在html中叫做對象，到OC我們這里就是字典

舉個例子：

window.webkit.messageHandlers.actionName.postMessage('parameter'); actionName：為方法名 parameter：為傳遞過來的參數，在html中叫做對象，到OC我們這里就是字典

這里我們沒有帶參數，要是需要參數，就讓前端加上，你不會沒關系，也不需要你會，前端知道該怎么做。

4、OC端添加JS方法處理器：

  WKUserContentController *userContentController = _webView.configuration.userContentController;
        [userContentController addScriptMessageHandler:self name:@"callPhone"]; [userContentController addScriptMessageHandler:self name:@"add"]; [userContentController addScriptMessageHandler:self name:@"edit"]; [userContentController addScriptMessageHandler:self name:@"delete"];

這里我們添加了了四個方法，切記着四個方法的名稱無比與JS端一致。

5、實現WKScriptMessageHandler代理方法

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{ NSLog(@"ScriptMessage 傳遞的消息內容 : %@",message.body); if ([message.name isEqualToString:@"callPhone"]) { } if ([message.name isEqualToString:@"add"]) { } if ([message.name isEqualToString:@"edit"]) { } if ([message.name isEqualToString:@"delete"]) { } }

6、在界面消失的時候清除JS方法

- (void)viewWillDisappear:(BOOL)animated { [super viewWillDisappear:animated];  [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"callPhone"]; [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"add"]; [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"edit"];
 [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"delete"];

 }

到這里就結束了，當你點擊 webView 上的按鈕時，就能夠進入我們的OC方法里。
總結起來就三點內容：
1.前端和蘋果移動端的方法名必須一致，且前端要以固定的格式來寫方法，否則移動端收不到事件反饋；
2.通過 WKUserContentController 添加html中預留的方法；
3.實現 WKScriptMessageHandler 的代理方法；