本文介紹WebViewJavaScriptBridge的使用巍扛，來操作js與oc的交互
1.編譯環(huán)境配置
image.png
2.創(chuàng)建WKWebview
- (void)initWKWebView
{
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
configuration.userContentController = [WKUserContentController new];
WKPreferences *preferences = [WKPreferences new];
preferences.javaScriptCanOpenWindowsAutomatically = YES;
preferences.minimumFontSize = 30.0;
configuration.preferences = preferences;
self.webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
NSString *urlStr = [[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil];
NSString *localHtml = [NSString stringWithContentsOfFile:urlStr encoding:NSUTF8StringEncoding error:nil];
NSURL *fileURL = [NSURL fileURLWithPath:urlStr];
[self.webView loadHTMLString:localHtml baseURL:fileURL];
self.webView.UIDelegate = self;
[self.view addSubview:self.webView];
}
3.創(chuàng)建WebViewJavascriptBridge實例
_webViewBridge = [WKWebViewJavascriptBridge bridgeForWebView:self.webView];
[_webViewBridge setWebViewDelegate:self];
4.注冊js要調(diào)用的Native 功能
[self registerNativeFunctions];
#pragma mark - private method
- (void)registerNativeFunctions
{
[self registScanFunction];
[self registShareFunction];
[self registLocationFunction];
[self regitstBGColorFunction];
[self registPayFunction];
[self registShakeFunction];
}
- (void)registLocationFunction
{
// - (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler {
// 后面的block參數(shù)是js要調(diào)用的Native實現(xiàn) handlerName 是這個native實現(xiàn)的別名
[_webViewBridge registerHandler:@"locationClick" handler:^(id data, WVJBResponseCallback responseCallback) {
// 獲取位置信息
NSString *location = @"廣東省深圳市南山區(qū)學(xué)府路XXXX號";
// 將結(jié)果返回給js
responseCallback(location);
}];
}
5.在HTML添加關(guān)鍵的JS (查看html文件)
HTML中添加關(guān)鍵的js.png
文件詳情
1.方法聲明
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
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)
}
2.調(diào)用上述的方法
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('testJSFunction', function(data, responseCallback) {
alert('JS方法被調(diào)用:'+data);
responseCallback('js執(zhí)行過了');
})
})
主動調(diào)用setupWebViewJavascriptBridge有兩個目的：
1领跛、執(zhí)行一次wvjbscheme://__BRIDGE_LOADED__請求。
2撤奸、注冊Native 要調(diào)用的js 功能吠昭。
6.在js中調(diào)用 Native 功能
講完過程，終于到了 js 調(diào)用Native 的用法了胧瓜。其實非常的簡單矢棚，例如我想要利用Native 獲取定位信息，那么在HTML中添加一個按鈕贷痪，onclick事件是locationClick()幻妓，按照如下實現(xiàn)即可。
function locationClick() {
WebViewJavascriptBridge.callHandler('locationClick',null,function(response) {
alert(response);
document.getElementById("returnValue").value = response;
});
}
// 沒有參數(shù)，有回調(diào)可以這樣寫
function locationClick() {
WebViewJavascriptBridge.callHandler('locationClick',function(response) {
alert(response);
document.getElementById("returnValue").value = response;
});
}
// 沒有參數(shù)肉津，又不需要回調(diào)可以這樣寫
function shake() {
WebViewJavascriptBridge.callHandler('shakeClick');
}
7.Native調(diào)用JS功能
- (void)rightClick
{
// // 如果不需要參數(shù)强胰，不需要回調(diào)，使用這個
// [_webViewBridge callHandler:@"testJSFunction"];
// // 如果需要參數(shù)妹沙，不需要回調(diào)偶洋，使用這個
// [_webViewBridge callHandler:@"testJSFunction" data:@"一個字符串"];
// 如果既需要參數(shù)，又需要回調(diào)距糖，使用這個
[_webViewBridge callHandler:@"testJSFunction" data:@"一個字符串" responseCallback:^(id responseData) {
NSLog(@"調(diào)用完JS后的回調(diào)：%@",responseData);
}];
}
本文參考相關(guān)技術(shù)博客玄窝，簡單整理WebViewJavascriptBridge與WKWebView交互的操作使用
