在開發(fā)過程中埂息，iOS 中實(shí)現(xiàn)加載 web 頁面主要有兩種控件，UIWebView 和 WKWebview，兩種控件對(duì)應(yīng)具體的實(shí)現(xiàn)方法不同几蜻。WKWebView是蘋果公司在iOS8系統(tǒng)推出的，這里我們主要概述WebKit中更新的WKWebView控件的新特性與使用方法体斩。
一梭稚、 WKWebView的代理方法
- WKNavigationDelegate
該代理提供的方法，可以用來追蹤加載過程（頁面開始加載絮吵、加載完成弧烤、加載失敗）蹬敲、決定是否執(zhí)行跳轉(zhuǎn)暇昂。
// 頁面開始加載時(shí)調(diào)用
-(void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation;
// 當(dāng)內(nèi)容開始返回時(shí)調(diào)用
- (void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation;
// 頁面加載完成之后調(diào)用
-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation;
// 頁面加載失敗時(shí)調(diào)用
-(void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation;
頁面跳轉(zhuǎn)的代理方法有三種，分為（收到跳轉(zhuǎn)與決定是否跳轉(zhuǎn)兩種）：
// 接收到服務(wù)器跳轉(zhuǎn)請(qǐng)求之后調(diào)用
-(void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation;
// 在收到響應(yīng)后伴嗡，決定是否跳轉(zhuǎn)
-(void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
// 在發(fā)送請(qǐng)求之前急波，決定是否跳轉(zhuǎn)
-(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;
2.WKUIDelegate
//創(chuàng)建一個(gè)新的webView
-(WKWebView**)webView:(WKWebView***)webView createWebViewWithConfiguration:(WKWebViewConfiguration *)configuration forNavigationAction:(WKNavigationAction *)navigationAction windowFeatures:(WKWindowFeatures *)windowFeatures;
下面代理方法全都是與界面彈出提示框相關(guān)的，針對(duì)于web界面的三種提示框（警告框瘪校、確認(rèn)框澄暮、輸入框）分別對(duì)應(yīng)三種代理方法。下面只列舉了警告框的方法阱扬。
-(void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(void (^)())completionHandler;
3.WKScriptMessageHandler
// 從web界面中接收到一個(gè)腳本時(shí)調(diào)用
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;
四泣懊、WKWebView加載JS
NSString *js = @"";
// 根據(jù)JS字符串初始化WKUserScript對(duì)象
WKUserScript *script = [[WKUserScript alloc] initWithSource:js injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];
// 根據(jù)生成的WKUserScript對(duì)象，初始化WKWebViewConfiguration
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
[config.userContentController addUserScript:script];
下面開始進(jìn)入正題
1. 首先需要引入WebKit庫
#import <WebKit/WebKit.h>
2.MessageHandler
創(chuàng)建WKWebViewConfiguration麻惶，配置各個(gè)API對(duì)應(yīng)的MessageHandler
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
WKUserContentController *userContentController = [[WKUserContentController alloc] init];
[userContentController addScriptMessageHandler:self name:@"Share"];
[userContentController addScriptMessageHandler:self name:@"Camera"];
configuration.userContentController = userContentController;
WKPreferences *preferences = [WKPreferences new];
preferences.javaScriptCanOpenWindowsAutomatically = YES;
preferences.minimumFontSize = 40.0;
configuration.preferences = preferences;
3.創(chuàng)建WKWebView
//loadFileURL方法通常用于加載服務(wù)器的HTML頁面或者JS嗅定，而loadHTMLString通常用于加載本地HTML或者JS
NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"WKWebViewMessageHandler" ofType:@"html"];
NSString *fileURL = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];
NSURL *baseURL = [NSURL fileURLWithPath:htmlPath];
[self.webView loadHTMLString:fileURL baseURL:baseURL];
self.webView.UIDelegate = self;
[self.view addSubview:self.webView];
4.實(shí)現(xiàn)協(xié)議方法
#pragma mark -- WKScriptMessageHandler
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
//JS調(diào)用OC方法
//message.boby就是JS里傳過來的參數(shù)
NSLog(@"body:%@",message.body);
if ([message.name isEqualToString:@"Share"]) {
[self ShareWithInformation:message.body];
} else if ([message.name isEqualToString:@"Camera"]) {
[self camera];
}
}
WKScriptMessage有兩個(gè)關(guān)鍵屬性name 和 body。因?yàn)槲覀兘o每一個(gè)OC方法取了一個(gè)name用踩，所以就可以根據(jù)name 來區(qū)分執(zhí)行不同的方法渠退。body 中存著JS 要給OC 傳的參數(shù)。
#pragma mark - Method
-(void)ShareWithInformation:(NSDictionary *)dic
{
if (![dic isKindOfClass:[NSDictionary class]]) {
return;
}
NSString *title = [dic objectForKey:@"title"];
NSString *content = [dic objectForKey:@"content"];
NSString *url = [dic objectForKey:@"url"];
//在這里寫分享操作的代碼
NSLog(@"要分享了哦??");
//OC反饋給JS分享結(jié)果
NSString *JSResult = [NSString stringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];
//OC調(diào)用JS
[self.webView evaluateJavaScript:JSResult completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"%@", error);
}];
}
-(void)camera
{
//在這里寫調(diào)用打開相冊(cè)的代碼
[self selectImageFromPhotosAlbum];
}
4.HTML文件中JS調(diào)用代碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<script language="javascript">
//JS執(zhí)行window.webkit.messageHandlers.Share.postMessage(<messageBody>)
function shareClick() {
window.webkit.messageHandlers.Share.postMessage({title:'測(cè)試分享的標(biāo)題',content:'測(cè)試分享的內(nèi)容',url:'https://github.com/maying1992'});
}
//分享回調(diào)結(jié)果顯示
function shareResult(channel_id,share_channel,share_url) {
var content = channel_id+","+share_channel+","+share_url;
alert(content);
document.getElementById("returnValue").value = content;
}
//JS執(zhí)行window.webkit.messageHandlers.Camera.postMessage(<messageBody>)
function cameraClick() {
window.webkit.messageHandlers.Camera.postMessage(null);
}
//調(diào)用相冊(cè)回調(diào)結(jié)果顯示
function cameraResult(result) {
alert(result);
document.getElementById("returnValue").value = result;
}
</script>
</head>
<body>
<h1>這是按鈕調(diào)用</h1>
<input type="button" value="分享" onclick="shareClick()" />
<input type="button" value="相機(jī)" onclick="cameraClick()" />
<h1>回調(diào)展示區(qū)</h1>
<textarea id ="returnValue" type="value" rows="5" cols="40">
</textarea>
</body>
</html>
代碼解釋：
在中JS 執(zhí)行window.webkit.messageHandlers.<name>.postMessage(<messageBody>)時(shí)脐彩，OC端被添加的ScriptMessageHandler就會(huì)執(zhí)行實(shí)現(xiàn)的WKScriptMessageHandler協(xié)議的方法 即
-(void)userContentController:(WKUserContentController*)userContentController didReceiveScriptMessage:(WKScriptMessage*)message
{
}
這樣在代理方法里面實(shí)現(xiàn)相應(yīng)本地原生方法的代碼碎乃，就完成了JS調(diào)用OC本地的過程。
5.OC調(diào)用JS
NSString *JSResult = [NSString stringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];
[self.webView evaluateJavaScript:JSResult completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"%@", error);
}];
代碼解釋：
通過 -evaluateJavaScript:completionHandler:實(shí)現(xiàn)OC調(diào)用JS惠奸，跟JavaScriptCore中的evaluateScript方法類似梅誓。
效果圖：
點(diǎn)擊分享按鈕
屏幕快照 2016-10-13 下午2.56.37.png
點(diǎn)擊相機(jī)按鈕
屏幕快照 2016-10-13 下午2.57.20.png
屏幕快照 2016-10-13 下午2.57.35.png
總結(jié)：
WKWebView新特性
1.在性能、穩(wěn)定性、功能方面有很大提升（最直觀的體現(xiàn)就是加載網(wǎng)頁是占用的內(nèi)存梗掰，模擬器加載百度與開源中國網(wǎng)站時(shí)嵌言，WKWebView占用23M，而UIWebView占用85M）及穗；
2.允許JavaScript的Nitro庫加載并使用（UIWebView中限制）摧茴；
3.支持了更多的HTML5特性；
4.高達(dá)60fps的滾動(dòng)刷新率以及內(nèi)置手勢(shì)埂陆；
5.將UIWebViewDelegate與UIWebView重構(gòu)成了14類與3個(gè)協(xié)議苛白。
WKWebview-MessageHandler 、WebViewJavaScriptBridge焚虱、JavaScriptCore優(yōu)缺點(diǎn)
1.WebViewJavaScriptBridge缺點(diǎn)就是要固定的加入相關(guān)代碼购裙，JS端代碼要在固定的函數(shù)內(nèi)添加，使用攔截協(xié)議URL的方式傳遞參數(shù)需要把參數(shù)拼接在后面鹃栽，遇到要傳遞的參數(shù)有特殊字符躏率，例如& 、= 民鼓、薇芝？等解析容易出問題;
bridge.callHandler('callme', {'blogURL': 'https://github.com/maying1992&content=每天都是好心情&img=圖片'}, function(response) {
log('JS端 得到 response', response)
2.WKWebview-MessageHandler在JS中寫起來更簡(jiǎn)單一點(diǎn)，JS傳遞參數(shù)更方便摹察，減少參數(shù)中特殊字符引起的錯(cuò)誤,WKWebView在性能恩掷、穩(wěn)定性方面更加強(qiáng)大；
3.JavaScriptCore使用起來比較簡(jiǎn)單供嚎，方便web端和移動(dòng)端的統(tǒng)一黄娘。
源碼
喜歡的親們隨手給個(gè)星星
