使用WKWebView的時候,如果想要實現JS呼叫OC方法,除了攔截URL之外,還有一種簡單的方式。那就是利用WKWebView的新特性MessageHandler來實現JS呼叫原生方法。
MessageHandler 是什麼?
WKWebView 初始化時,有一個引數叫configuration,它是WKWebViewConfiguration
型別的引數,而WKWebViewConfiguration
有一個屬性叫userContentController
,它又是WKUserContentController
型別的引數。WKUserContentController
物件有一個方法- addScriptMessageHandler:name:
,我把這個功能簡稱為MessageHandler。
- addScriptMessageHandler:name:
有兩個引數,第一個引數是userContentController的代理物件,第二個引數是JS裡傳送postMessage的物件。
所以要使用MessageHandler功能,就必須要實現WKScriptMessageHandler
協議。
我們在該API的描述裡可以看到在JS中的使用方法:
window.webkit.messageHandlers.<name>.postMessage(<messageBody>)
//其中<name>,就是上面方法裡的第二個引數`name`。
//例如我們呼叫API的時候第二個引數填@"Share",那麼在JS裡就是:
//window.webkit.messageHandlers.Share.postMessage(<messageBody>)
//<messageBody>是一個鍵值對,鍵是body,值可以有多種型別的引數。
// 在`WKScriptMessageHandler`協議中,我們可以看到mssage是`WKScriptMessage`型別,有一個屬性叫body。
// 而註釋裡寫明瞭body 的型別:
Allowed types are NSNumber, NSString, NSDate, NSArray, NSDictionary, and NSNull.
複製程式碼
怎麼使用MessageHandler?
1.建立WKWebViewConfiguration
物件,配置各個API對應的MessageHandler。
WKUserContentController
物件可以新增多個scriptMessageHandler。
看了示例程式碼,會很容易理解。示例程式碼如下:
// 這是建立configuration 的過程
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
WKPreferences *preferences = [WKPreferences new];
preferences.javaScriptCanOpenWindowsAutomatically = YES;
preferences.minimumFontSize = 40.0;
configuration.preferences = preferences;
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
// addScriptMessageHandler 很容易導致迴圈引用
// 控制器 強引用了WKWebView,WKWebView copy(強引用了)configuration, configuration copy (強引用了)userContentController
// userContentController 強引用了 self (控制器)
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"ScanAction"];
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Location"];
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Share"];
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Color"];
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Pay"];
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"Shake"];
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"GoBack"];
[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"PlaySound"];
}
複製程式碼
需要注意的是addScriptMessageHandler
很容易引起迴圈引用,導致控制器無法被釋放,所以需要加入以下這段:
- (void)viewWillDisappear:(BOOL)animated
{
[super viewWillDisappear:animated];
// 因此這裡要記得移除handlers
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"ScanAction"];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Location"];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Share"];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Color"];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Pay"];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"Shake"];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"GoBack"];
[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"PlaySound"];
}
複製程式碼
2.建立WKWebView。
這裡沒什麼好說的,直接看示例程式碼吧:
self.webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
NSString *urlStr = [[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil];
NSURL *fileURL = [NSURL fileURLWithPath:urlStr];
[self.webView loadFileURL:fileURL allowingReadAccessToURL:fileURL];
self.webView.navigationDelegate = self;
self.webView.UIDelegate = self;
[self.view addSubview:self.webView];
複製程式碼
3.實現協議方法。
我這裡實現了兩個協議<WKUIDelegate,WKScriptMessageHandler>
,WKUIDelegate
是因為我在JS中彈出了alert 。WKScriptMessageHandler
是因為我們要處理JS呼叫OC方法的請求。
先看實現協議方法的示例程式碼:
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
// message.body -- Allowed types are NSNumber, NSString, NSDate, NSArray,NSDictionary, and NSNull.
if ([message.name isEqualToString:@"ScanAction"]) {
NSLog(@"掃一掃");
} else if ([message.name isEqualToString:@"Location"]) {
[self getLocation];
} else if ([message.name isEqualToString:@"Share"]) {
[self shareWithParams:message.body];
} else if ([message.name isEqualToString:@"Color"]) {
[self changeBGColor:message.body];
} else if ([message.name isEqualToString:@"Pay"]) {
[self payWithParams:message.body];
} else if ([message.name isEqualToString:@"Shake"]) {
[self shakeAction];
} else if ([message.name isEqualToString:@"GoBack"]) {
[self goBack];
} else if ([message.name isEqualToString:@"PlaySound"]) {
[self playSound:message.body];
}
}
複製程式碼
WKScriptMessage
有兩個關鍵屬性name
和 body
。
因為我們給每一個OC 方法取了一個name,那麼我們就可以根據name 來區分執行不同的方法。body 中存著JS 要給OC 傳的引數。
關於引數body 的解析,我就舉一個body中放字典的例子,其他的稍後可以看demo。
解析JS 呼叫OC 實現分享的引數:
- (void)shareWithParams:(NSDictionary *)tempDic
{
if (![tempDic isKindOfClass:[NSDictionary class]]) {
return;
}
NSString *title = [tempDic objectForKey:@"title"];
NSString *content = [tempDic objectForKey:@"content"];
NSString *url = [tempDic objectForKey:@"url"];
// 在這裡執行分享的操作
// 將分享結果返回給js
NSString *jsStr = [NSString stringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];
[self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"%@----%@",result, error);
}];
}
複製程式碼
message.boby 就是JS 裡傳過來的引數。我們不同的方法先做一下容錯性判斷。然後正常取值就可以了。
4.處理HTML中JS呼叫。
HMTL的原始碼跟之前的HTML內容差不多,只有JS的呼叫部分改變了。
// 傳null
function scanClick() {
window.webkit.messageHandlers.ScanAction.postMessage(null);
}
// 傳字典
function shareClick() {
window.webkit.messageHandlers.Share.postMessage({title:'測試分享的標題',content:'測試分享的內容',url:'http://www.baidu.com'});
}
// 傳字串
function playSound() {
window.webkit.messageHandlers.PlaySound.postMessage('shake_sound_male.wav');
}
// 傳陣列
function colorClick() {
window.webkit.messageHandlers.Color.postMessage([67,205,128,0.5]);
}
複製程式碼
5.OC呼叫JS
這裡使用WKWebView 實現OC 呼叫JS方法跟上一篇是一樣的,還是利用
- evaluateJavaScript:completionHandler:
。像下面這樣使用:
// 將分享結果返回給js
NSString *jsStr = [NSString stringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];
[self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"%@----%@",result, error);
}];
複製程式碼
使用MessageHandler 的好處
- 1.在JS中寫起來簡單,不用再用建立URL的方式那麼麻煩了。
- 2.JS傳遞引數更方便。使用攔截URL的方式傳遞引數,只能把引數拼接在後面,如果遇到要傳遞的引數中有特殊字元,如&、=、?等,必須得轉換,否則引數解析肯定會出錯。
例如傳遞的url是這樣的:
http://www.baidu.com/share/openShare.htm?share_uuid=shdfxdfdsfsdf&name=1234556
使用攔截URL 的JS呼叫方式
loadURL("firstClick://shareClick?title=分享的標題&content=分享的內容&url=連結地址&imagePath=圖片地址"); }
複製程式碼
將上面的url 放入連結地址這裡後,根本無法區分share_uuid是其他引數,還是url裡附帶的引數。 但是使用MessageHandler 就可以避免特殊字元引起的問題。
效果圖
更詳細的使用步驟還是去工程中檢視吧。地址:JS_OC_MessageHandler