本文介绍WebViewJavaScriptBridge的使用，来操作js与oc的交互
1.编译环境配置
image.png
2.创建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.创建WebViewJavascriptBridge实例
_webViewBridge = [WKWebViewJavascriptBridge bridgeForWebView:self.webView];
[_webViewBridge setWebViewDelegate:self];
4.注册js要调用的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参数是js要调用的Native实现 handlerName 是这个native实现的别名
[_webViewBridge registerHandler:@"locationClick" handler:^(id data, WVJBResponseCallback responseCallback) {
// 获取位置信息
NSString *location = @"广东省深圳市南山区学府路XXXX号";
// 将结果返回给js
responseCallback(location);
}];
}
5.在HTML添加关键的JS (查看html文件)
HTML中添加关键的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.调用上述的方法
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('testJSFunction', function(data, responseCallback) {
alert('JS方法被调用:'+data);
responseCallback('js执行过了');
})
})
主动调用setupWebViewJavascriptBridge有两个目的：
1、执行一次wvjbscheme://__BRIDGE_LOADED__请求。
2、注册Native 要调用的js 功能。
6.在js中调用 Native 功能
讲完过程，终于到了 js 调用Native 的用法了。其实非常的简单，例如我想要利用Native 获取定位信息，那么在HTML中添加一个按钮，onclick事件是locationClick()，按照如下实现即可。
function locationClick() {
WebViewJavascriptBridge.callHandler('locationClick',null,function(response) {
alert(response);
document.getElementById("returnValue").value = response;
});
}
// 没有参数，有回调可以这样写
function locationClick() {
WebViewJavascriptBridge.callHandler('locationClick',function(response) {
alert(response);
document.getElementById("returnValue").value = response;
});
}
// 没有参数，又不需要回调可以这样写
function shake() {
WebViewJavascriptBridge.callHandler('shakeClick');
}
7.Native调用JS功能
- (void)rightClick
{
// // 如果不需要参数，不需要回调，使用这个
// [_webViewBridge callHandler:@"testJSFunction"];
// // 如果需要参数，不需要回调，使用这个
// [_webViewBridge callHandler:@"testJSFunction" data:@"一个字符串"];
// 如果既需要参数，又需要回调，使用这个
[_webViewBridge callHandler:@"testJSFunction" data:@"一个字符串" responseCallback:^(id responseData) {
NSLog(@"调用完JS后的回调：%@",responseData);
}];
}
本文参考相关技术博客，简单整理WebViewJavascriptBridge与WKWebView交互的操作使用
