前言
由于Xcode8發(fā)布之后，編譯器開始不支持iOS 7了，這樣我們的app也改為最低支持iOS 8.0，既然需要與web交互，那自然也就選擇使用了 iOS 8.0之后 才推出的新控件 WKWebView.
相比與 UIWebView, WKWebView 存在很多優(yōu)勢：
先解釋下標題：“iOS與JS交互”。iOS指iOS原生代碼（文章只有OC示例），JS指WEB前端（不單指JavaScript），交互指JS調(diào)用iOS和iOS調(diào)用JS。
本文介紹通過 WKWebView協(xié)議攔截的方式實現(xiàn)iOS與JS交互。
WKWebView是Apple在iOS8推出的Webkit框架中的負責網(wǎng)頁的渲染與展示的類，相比UIWebView速度更快，占用內(nèi)存更少，支持更多的HTML特性。
一、JS調(diào)用iOS：
實現(xiàn)邏輯：點擊JS的登錄按鈕，JS將登錄成功后的token數(shù)據(jù)傳遞給iOS，iOS將收到的數(shù)據(jù)展示出來。
實現(xiàn)效果：
JS調(diào)用iOS實現(xiàn)效果
JS代碼：
//! 登錄按鈕<button onclick = "login()" style = "font-size: 18px;">登錄</button>
//! 登錄function login() { var token = "js_tokenString"; loginSucceed(token);}//! 登錄成功function loginSucceed(token) { var action = "loginSucceed"; jsToOc(action, token);}//! JS調(diào)用OC入口function jsToOc(action, params) { var url = "jsToOc://" + action + "?" + params; loadURL(url);}//! 加載URLfunction loadURL(url) { window.location.href = url;}iOS代碼：
#pragma mark - WKNavigationDelegate//! WKWeView在每次加載請求前會調(diào)用此方法來確認是否進行請求跳轉- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler { if ([navigationAction.request.URL.scheme caseInsensitiveCompare:@"jsToOc"] == NSOrderedSame) { [WKWebViewInterceptController showAlertWithTitle:navigationAction.request.URL.host message:navigationAction.request.URL.query cancelHandler:nil]; decisionHandler(WKNavigationActionPolicyCancel); } else { decisionHandler(WKNavigationActionPolicyAllow); }}實現(xiàn)原理：
1、JS與iOS約定好jsToOc協(xié)議，用作JS在調(diào)用iOS時url的scheme；
2、JS在登錄成功后加載含有token數(shù)據(jù)的url： (jsToOc://loginSucceed?js_tokenString)；
3、iOS的WKWebView在請求跳轉前會調(diào)用-webView:decidePolicyForNavigationAction:decisionHandler:方法來確認是否允許跳轉；
4、iOS在此方法內(nèi)截取jsToOc協(xié)議獲取JS傳過來的數(shù)據(jù)，用UIAlertController顯示出來，并通過decisionHandler不允許此請求跳轉。
PS1：除了顯示截取到的數(shù)據(jù)，iOS還可以將navigationAction.request.URL.host看作JS想調(diào)用的方法名，將navigationAction.request.URL.query看作該方法的參數(shù)集，從而體現(xiàn)出JS調(diào)用iOS的概念。
PS2：在-webView:decidePolicyForNavigationAction:decisionHandler:方法中一定要調(diào)用decisionHandler回調(diào)來制定允許請求跳轉WKNavigationActionPolicyAllow或者不允許跳轉WKNavigationActionPolicyAllow，不然會崩潰。
二、iOS調(diào)用JS：
實現(xiàn)邏輯：點擊iOS的登錄按鈕，iOS將登錄成功后的token數(shù)據(jù)傳遞給JS，JS將收到的數(shù)據(jù)展示出來。
實現(xiàn)效果：
iOS調(diào)用JS實現(xiàn)效果
iOS代碼：
//! 登錄按鈕UIBarButtonItem *loginBtnItem = [[UIBarButtonItem alloc] initWithTitle:@"登錄" style:UIBarButtonItemStylePlain target:self action:@selector(login:)];self.navigationItem.rightBarButtonItems = @[loginBtnItem];
//! 登錄方法- (void)login:(id)sender { dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ [self.webView evaluateJavaScript:@"ocToJs('loginSucceed', 'oc_tokenString')" completionHandler:^(id response, NSError *error) {}]; });}JS代碼：
//! iOS調(diào)用JS入口function ocToJs(action, params) { document.getElementById("returnValue").innerHTML = action + '?' + params;}//! iOS調(diào)用JS數(shù)據(jù)顯示框<div id = "returnValue" style = "font-size: 18px; border: 1px dotted; height: 50px;"> </div>
實現(xiàn)原理：
1、iOS與JS約定好ocToJs方法，用作iOS在調(diào)用JS時的入口方法；
2、iOS在登錄成功后以loginSucceed和oc_tokenString為參數(shù)拼接JS代碼ocToJs('loginSucceed', 'oc_tokenString');
3、iOS使用WKWebView的-evaluateJavaScript:completionHandler:方法執(zhí)行拼接好的JS代碼；
3、JS在ocToJs方法中將iOS傳過來的數(shù)據(jù)顯示在div元素中；
4、iOS通過completionHandler收到JS中ocToJs方法的回調(diào)。
PS：WKWebView的-evaluateJavaScript:completionHandler:方法可以執(zhí)行JS代碼。但只有在整個webView加載完成之后調(diào)用此方法才會有響應。比如：我們可以通過如下方式獲取JS的標題。
//! WKWebView在每次加載請求完成后會調(diào)用此方法- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation { [webView evaluateJavaScript:@"document.title" completionHandler:^(NSString *title, NSError *error) { self.title = title; }];}可從QiShare的Github獲取工程源碼
總結
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對VEVB武林網(wǎng)的支持。
新聞熱點
疑難解答
圖片精選
