前言
當(dāng)下，移動端 APP 嵌套 HTML5 網(wǎng)頁已成常態(tài)沙郭，我們除了簡單地用 WebView 加載顯示之外佛呻，很多情況下，我們還需要和 WebView 進(jìn)行交互病线，比如點(diǎn)擊 WebView 上面的按鈕調(diào)用 OC 端的函數(shù)實(shí)現(xiàn)具體的操作……
iOS 開發(fā)中吓著，H5 和原生交互有多種方式， JSBridge 就是最常用的一種送挑，各 JSBridge 類庫的實(shí)現(xiàn)原理大同小異…今天呢绑莺，介紹一下盛名已久的 WebViewJavascriptBridge ，它主要幫助我們優(yōu)雅地實(shí)現(xiàn) OC 與 JS 的交互惕耕，非常方便簡潔纺裁。
目錄結(jié)構(gòu)
- WebViewJavascriptBridge_JS
JS 端用來收發(fā)消息的類，純 JS 代碼。其做為 html 的 bridge欺缘，負(fù)責(zé)（主動）對原生界面發(fā)送消息栋豫，整理并(被動的向原生界面)傳輸數(shù)據(jù)，并向 html 發(fā)送回調(diào)信息谚殊；
- WebViewJavascriptBridge
橋接的入口丧鸯，針對不同類型的 webView（UIWebView，WKWebView络凿，WebView）進(jìn)行分發(fā)骡送；
針對 UIWebView 和 WebView 做的一層封裝，主要用來執(zhí)行 JS 代碼絮记，以及實(shí)現(xiàn) UIWebView 和 WebView的代理方法摔踱，并通過攔截 URL 來通知 WebViewJavascriptBridgeBase 做相應(yīng)操作
- WKWebViewJavascriptBridge
針對 WKWebView 做的一層封裝，主要用來執(zhí)行 JS 代碼怨愤，以及實(shí)現(xiàn) WKWebView 的代理方法派敷，并通過攔截 URL 來通知 WebViewJavascriptBridgeBase 做相應(yīng)操作
- WebViewJavascriptBridgeBase
用來進(jìn)行 bridge 初始化和消息處理的核心類；
這個類是在支持 WKWebView 后從 WebViewJavascriptBridge 中獨(dú)立出來的邏輯撰洗，專門用來處理 bridge 相關(guān)的邏輯篮愉，不再與具體的 Web View 相關(guān)聯(lián)了
理一下它們的關(guān)系
WebViewJavascriptBridge_JS 可以看成是 html 文件中 JS 代碼的 bridge，主要服務(wù)于 html 中的 JS 方法功能的差导；另外的三個 WebViewJavascriptBridge, WKWebViewJavascriptBridge, WebViewJavascriptBridgeBase 是 webView 的 bridge试躏，主要服務(wù)于原生的。這兩個 bridge 之間主要通過 webView 的代理方法webView:decidePolicyForNavigationAction:decisionHandler: 和 stringByEvaluatingJavaScriptFromString: 方法進(jìn)行消息的傳遞和數(shù)據(jù)的傳輸设褐。
眾所周知颠蕴，WKWebView 和 UIWebView 的性能差異很大。WKWebView 比 UIWebView 加載網(wǎng)頁的速度更快助析，效率更高犀被，內(nèi)存消耗小，所以現(xiàn)在在開發(fā)中我都是選擇使用 WKWebView外冀。
并且寡键，在當(dāng)前時間節(jié)點(diǎn)，大多數(shù) iOS App 都是基于 iOS 8.0+ 的雪隧，這是一個 WKWebView 的時代西轩。
使用步驟
1、導(dǎo)入 WebViewJavaScriptBridge 框架：
pod ‘WebViewJavascriptBridge’
2膀跌、創(chuàng)建 WKWebView 和 WKWebViewJavascriptBridge 示例：
#import <WebViewJavascriptBridge.h>
@interface H5WebViewController ()<WKNavigationDelegate, WKUIDelegate>
@property (strong, nonatomic) WKWebView *webView;
@property WKWebViewJavascriptBridge *bridge;
@end
- (void)viewDidLoad {
[super viewDidLoad];
[self setUpWebView];
[self setUpWebViewJavascriptBridge];
}
- (void)setUpWebView {
self.wkWebView = [[WKWebView alloc] initWithFrame:self.view.bounds];
self.wkWebView.navigationDelegate = self;
self.wkWebView.UIDelegate = self;
[self.view addSubview:self.wkWebView];
}
/**
* 使用 WebViewJavascriptBridge 實(shí)現(xiàn) OC 與 JS 交互
*/
- (void)setUpWebViewJavascriptBridge {
if (_bridge) {
return;
}
// 設(shè)置能夠進(jìn)行橋接
[WebViewJavascriptBridge enableLogging];
// 初始化 WebViewJavascriptBridge 實(shí)例, 設(shè)置代理, 進(jìn)行橋接
_bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
[_bridge setWebViewDelegate:self];
__weak __typeof(self)weakSelf = self;
/**
JS 調(diào)用 OC 遭商，設(shè)置導(dǎo)航條 title
@param data 后臺 JS 頁面?zhèn)鬟^來的參數(shù)
@param registerHandler 要注冊的事件名稱(這里我們?yōu)?locationAlertViewWithMessage)
@param handler 回調(diào) block 函數(shù) 當(dāng)后臺觸發(fā)這個事件的時候會執(zhí)行 block 里面的代碼
*/
[_bridge registerHandler:@"_app_setTitle" handler:^(id data, WVJBResponseCallback responseCallback) {
if (data) {
NSDictionary *dic = (NSDictionary *)data;
weakSelf.title = dic[@"title"];
}
// responseCallback 給后臺 JS 的回復(fù)
responseCallback(@"OK，已收到標(biāo)題信息捅伤！");
}];
/**
* JS 調(diào)用 OC 劫流，關(guān)閉當(dāng)前 H5 控制器
*/
[_bridge registerHandler:@"_app_closeWebView" handler:^(id data, WVJBResponseCallback responseCallback) {
[weakSelf closeTheView];
responseCallback(@"OK，已關(guān)閉當(dāng)前 WebView ");
}];
/**
* OC 調(diào)用 JS ，獲取 OC 的值
*/
[_bridge callHandler:@"_app_getToken" data:@"userToken"];
}
- (void)dealloc {
[_bridge removeHandler:@"_app_setTitle"];
[_bridge removeHandler:@"_app_closeWebView"];
[_bridge removeHandler:@"_app_getToken"];
}
// 關(guān)閉當(dāng)前窗口
- (void)closeTheView {
[self dismissViewControllerAnimated:YES completion:nil];
[self.navigationController popViewControllerAnimated:YES];
}
3祠汇、HTML 代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="JSCallOC">js調(diào)用oc</div>
<div id="textOne"></div>
</body>
<script>
// 固定寫法 函數(shù)名字可變 這個方法是必須的
<!-- 申明交互 -->
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
return callback(WebViewJavascriptBridge);
} else {
document.addEventListener('WebViewJavascriptBridgeReady' , function() {
callback(WebViewJavascriptBridge)
}, false );
}
if (window.WVJBCallbacks) {
return window.WVJBCallbacks.push(callback);
}
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
//這也是固定的,OC調(diào)JS,需要給OC調(diào)用的函數(shù)必須寫在這個函數(shù)里面
setupWebViewJavascriptBridge(function(bridge) {
//oc調(diào)js不帶參數(shù)不帶回調(diào)
bridge.registerHandler('OCCallJS',function() {
alert("oc調(diào)js不帶參數(shù)不帶回調(diào)");
})
//oc調(diào)用js帶參數(shù)不帶回調(diào)
bridge.registerHandler('OCCallJSParameter',function(params) {
alert("oc調(diào)js帶參數(shù)不帶回調(diào)"+params);
})
//oc調(diào)js帶參數(shù)帶回調(diào)
bridge.registerHandler('OCCallJSParameterBlock',function (params,responseCallback) {
alert("oc調(diào)js帶參數(shù)帶回調(diào)");
responseCallback("參數(shù)回調(diào)");
})
})
// js調(diào)用oc
// 每個方法的特殊處理
function setTitle() {
WebViewJavascriptBridge.callHandler('_app_setTitle', '這是一個nav標(biāo)題',
function (response) {
// 移動端回傳的數(shù)據(jù)
alert('移動端回傳的數(shù)據(jù):' + response);
});
}
</script>
</html>
結(jié)束語
WebViewJavascriptBridge 使用起來比較方便快捷仍秤，并且還有 Android 版本的。如果 Android 和 iOS 都使用的話可很，就避免了前端既要寫一份 Android 又要寫一份 iOS 的 JS 與 OC 交互诗力，調(diào)試起來只要一端通了，JS 那邊應(yīng)該就沒啥問題我抠，排查問題方便苇本、高效，不用針對兩個端分別設(shè)置不同的代碼菜拓，統(tǒng)一性很重要哦瓣窄。
如有不足，歡迎批評指正纳鼎！
