现在很多需求需要原生和H5的深入交互，在我经历的项目中见过的方法有四五种，但是我经常使用的方式有两种，我觉得这两种可以满足大部分开发者的需求。
-
利用 WKWebView 进行交互 (系统 API)
-
oc 第三方 WebViewJavascriptBridge
一 、我先带大家了解一下通过系统API如何进行交互，和交互的生命周期。
WKWebView 的创建
- (WKWebView *)webView {
if (!_webView) {
//初始化WKWebViewConfiguration
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
/**
设置代理对象
ScriptMessageHandler:WKScriptMessageHandler的代理对象
name:跟后端协调好的响应名称
**/
[config.userContentController addScriptMessageHandler:self name:@"methodName"];
_webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT - 64) configuration:config];
[_webView loadRequest:[ NSURLRequest requestWithURL:url]];
_webView.navigationDelegate = self;
}
return _webView;
}
在这段代码中，我们设置了两个代理，所以应该遵守代理协议，分别是 WKNavigationDelegate 和 WKScriptMessageHandler，两个代理方法的具体实现会在下文进行说明。这里特别说明 WKScriptMessageHandler 代理对象的设置并不是使用点语法的形式，而是在初始化 webView 的时候先初始化 WKWebViewConfiguration 类型的对象 config，然后使用 - (instancetype)initWithFrame:(CGRect)frame configuration:(WKWebViewConfiguration *)configuration 方法设置代理。
WKNavigationDelegate
这个代理我用到的代理方法比较简单有三个如下，其他的代理方法也有很多文章进行说明，我就不再赘述。
// 页面开始加载时调用
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
}
// 页面加载完成之后调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
}
// 页面加载失败时调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(WKNavigation *)navigation {
}
WKScriptMessageHandler（JS 调用原生）
在看这个代理方法之前，我们首先回顾一下 webView 的创建时调用的一句代码
[config.userContentController addScriptMessageHandler:self name:@"methodName"];
在创建 config 对象时，我们给他绑定一个名为 methodName 的方法，而这个方法就是和 H5 同事协定好的用来交互的方法的方法名，里面可以通过传参来确定接下来进行何种交互，而交互的代码就写在代理方法里面，接下来看看代理方法。
- (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message {
NSString *messageStr = [NSString stringWithFormat:@"%@",message.body];
}
这里的 message 是 js 调用 methodName 方法回传的信息，我们可以在代理方法中通过解析 message 得到和 H5 协定好的特殊标识来进行交互。当然你必须在 js 的代码中写如下代码才能保证交互成功（PS：这是 H5 中的 JS 代码）。
window.webkit.messageHandlers. methodName.postMessage()
我个人认为这样的交互方式其实跟 UIWebView 通过截取字符串的交互方式有些类似，都是通过和前端协定好的特殊标识符来执行所对应的交互内容，举个例子，一个 H5 中有两个按钮，点击第一个按钮跳转控制器 A，第二个按钮跳转控制器 B，那 H5 人员在处理按钮 A 和 B 的交互事件的地方分别写下如下代码
window.webkit.messageHandlers. methodName.postMessage(pushVcA)
window.webkit.messageHandlers. methodName.postMessage(pushVcB)
我们 iOS 端在代理方法中写下如下代码
- (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message {
NSString *messageStr = [NSString stringWithFormat:@"%@",message.body];
if (messageStr isEqualToString:@"pushVcA") {
//跳转控制器A
}
if (messageStr isEqualToString:@"pushVcB") {
//跳转控制器B
}
}
这只是一个简单的交互场景举例，但是 JS 调用原生方法就是在这个代理方法中实现。接下来讲一下原生如何调用 JS 方法。
原生调用 JS
原生调用 JS 需要用到 WKWebView 的方法
- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler
我的使用方式为
NSString *startStr = @"startUploadImgCB('start')";
[self.webView evaluateJavaScript:startStr completionHandler:^(id _Nullable response, NSError * _Nullable error) {
NSLog(@"value: %@ error: %@", response, error);
}];
这里的 startUploadImgCB 即为 JS 写好的方法，start 是我传给 JS 的参数，目的是告诉 JS 原生开始上传图片，开始上传动画。注意这个方法要跟上文中约定好的交互方法 methodName 方法区分开，methodName 是 JS 调用原生的方法名，而 startUploadImgCB 是原生调用 JS 的方法名。
二、 oc 第三方 WebViewJavascriptBridge
<pre>
iOS 与 HTML5 的交互方式
iOS 与 H5 的交互方式大概有以下 5 种:
-
利用 WKWebView 进行交互 (系统 API)
-
利用 UIWebView 进行交互 (系统 API)
-
苹果的 javascriptcore.framework 框架;
-
跨平台 cordova 框架;
-
第三方 WebViewJavascriptBridge
本篇文章就来讲讲 WebViewJavascriptBridge 的简单使用。
WebViewJavascriptBridge 的使用
-
在 Github 上下载
WebJavaScriptBridge -
解压缩包, 将
WebViewJavascriptBridge文件夹拖到你的工程中 -
在需要使用
WebViewJavascriptBridge的类文件中引入头文件WebViewJavascriptBridge.h
使用方式
HTML 页面中需要完成的工作
1. 在 HTML 文件中添加下方代码, 这段代码是固定的, 必须添加的：
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. 设置 JS 与 OC 交互时的命令字：
// 无参数时,用下列方式
window.WebViewJavascriptBridge.callHandler('Set')
// 单个参数时,用下列方式
// window.WebViewJavascriptBridge.callHandler('Set','参数')
// 多参数时,用下列方式
// window.WebViewJavascriptBridge.callHandler('Set', {'参数1': '111', '参数
3. 设置 OC 与 JS 交互时的接收方法与命令字：
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('Get', function(data, responseCallback) {
alert(data);
})
})
OC 控制器中需要完成的工作
1. 向控制器中引入文件WebViewJavascriptBridge.h
2. 加载 HTML 文件
[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"WebViewJavascriptBridgeDemo" ofType:@"html"]]]];
3. 初始化 WebViewJavascriptBridge
@property (nonatomic, strong) WebViewJavascriptBridge *bridge;
...
self.bridge = [WebViewJavascriptBridge bridgeForWebView:self.webView];
// 若要实现WebViewDelegate要添加这句绑定代码
// [self.bridge setWebViewDelegate:self];
4. 根据命令字设置 JS 发数据给 OC 的方法
[self.bridge registerHandler:@"Set" handler:^(id data, WVJBResponseCallback responseCallback) {
//这里的data为JS发送给OC的数据
}];
5. 根据命令字设置 OC 发数据给 JS 的方法
[self.bridge callHandler:@"Get" data:@"OC已接受"];
如果后期需要我会继续把例如 UIWebView....等其他方式进行添加总结
网友评论