项目上线也有一段时间了，新项目大量使用了H5页面，因此存在很多需要跟Native进行数据交互的需求。起初，我们项目开发沿用了标准版的Native与H5的交互框架Cordova插件，但是在开发接近尾声时考虑到Cordova本身的特点，虽然功能强大，但是很多并不适合与我们的项目，以及一些缺陷，因此提出更换JS与Native通信的插件。
团队对目前主流的使用框架做了调研，相关调研结果如下：
| 框架 | 兼容性 | 易用性(1最易) | 社区热度(3最热) | 可维护性(1最易) | 参考文档(3最丰富) | 调用H5标准 |
|---|---|---|---|---|---|---|
| JSBridge | iOS/Android | 1 | 1 | 2 | 2 | 是 |
| WebViewJavaScriptBridge | iOS/Android | 1 | 3 | 1 | 3 | 是 |
| Cordova | iOS/Android | 3 | 1 | 3 | 1 | 是 |
使用上的优缺点对比:
| 框架 | 优点 | 缺点 |
|---|---|---|
| JSBridge | H5页面无需加载额外文件，无需声明，直接调用即可 | 安卓实现桥接的方式可能跟现有业务有冲突，代码相对比较多，长时间没有维护 |
| WebViewJavaScriptBridge | 源码简单易懂，后期可自行维护H5页面无需加载额外文件，需声明，声明后，直接调用即可 | 安卓没有持续维护，代码比较陈旧，需要自己去优化代码 |
| Cordova | 功能非常强大 | H5页面需加载多个js文件；每增加一个插件需要配置，较麻烦 |
从易用性，社区热度，可维护性方面考虑：团队考虑选用WebViewJavaScriptBridge作为汇付项目的H5与Native通信框架。
WebViewJavaScriptBridge到底能干什么？
Native发布新功能新活动，很多情况下是通过发布新版本去实现的。然而对于在app内需要经常更新的页面，很多情况下我们会使用h5页面去实现，可以做到数据更新更加的及时。那么问题来了？
对于iOS而言，JS与OC 之间本身是不存在任何交互通信的，也就是说,JS不能够直接调用Native实现的方法。利用WebViewJavaScriptBridge 可以很好的实现JS和OC之间的相互调用，这就是WebViewJavaScriptBridge要做的事情。
实现JS与OC之间通信的需要借助的是iOS webView代理方法：-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType 该方法在每次做重定向的时候都会被调用到，所以可以通过拦截做一下坏事。
WebViewJavaScriptBridge 实现JS调用Native大致流程：
Paste_Image.png
WebViewJavaScriptBridge 实现Native调用JS大致流程：
Paste_Image.png
核心语法介绍：
1.Native调用JS实使用的原生方法是:[_webView stringByEvaluatingJavaScriptFromString:@””];
2.-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType iOS 原生webview的代理方法，每次重定向时都会被调用
3.- (void)registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler Native注册与H5交互的指定方法
4.- (void)callHandler:(NSString *)handlerName data:(id)data 实现Native调用JS方法，该方法是对
stringByEvaluatingJavaScriptFromString 做了一层封装。
遇到的坑:
1.Native 调用js会阻塞主线程，解决方法使用：[self.myWebView performSelectorOnMainThread:@selector(stringByEvaluatingJavaScriptFromString:) withObject:javascript waitUntilDone:NO]; 重要的是最后那个参数：设置为NO表示不等待selector执行完毕。
2.数据混淆。解决办法：使用native调用js的方法去做，因为初始化出来的callHandler肯定是唯一的。Example:在友盟SDK6.0以下版本的分享成功回调使用的时代理协议去实现的，这就意味着回调执行要在全局进行保存，这就有可能出现多个回调时数据出现混淆。
3.在数据传递方面上要使用对象的方式来传递数据，避免使用数组。数组的坑你们懂得啦..OC上取值为空，马上给你闪退。
初始化WebViewJavaScriptBridge:
WebViewJavascriptBridge *bridge = [WebViewJavascriptBridge bridgeForWebView:self.myWebView];
[bridge setWebViewDelegate:self];
self.myBridge = bridge;
WebViewJSBridgeHelper *helper = [[WebViewJSBridgeHelper alloc] initWithWebView:self.myWebView registerHandlersWithBridge:bridge sender:self completeBlock:^{
[self requestPage];
}];
[helper registerPlugin];
WebViewJSBridgeHelper 代码，封装到一个文件里面只是为了代码美观点，写到controller里面也可以实现功能。
- (void)registerPlugin {
[_jsBridge registerHandler:@"testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
[TestViewController showWithSender:_viewController];
}];
[_jsBridge registerHandler:@"reloadPage" handler:^(id data, WVJBResponseCallback responseCallback) {
if (_completeBlock) {
_completeBlock();
}
}];
[_jsBridge registerHandler:@"changeBackground" handler:^(id data, WVJBResponseCallback responseCallback) {
NSDictionary *jsonDict = (NSDictionary *)data;
NSString *colorName = [jsonDict objectForKey:@"key"];
if ([colorName isEqualToString:@"red"]) {
_viewController.view.backgroundColor = [UIColor redColor];
} else if([colorName isEqualToString:@"blue"]) {
_viewController.view.backgroundColor = [UIColor blueColor];
} else if ([colorName isEqualToString:@"green"]) {
_viewController.view.backgroundColor = [UIColor greenColor];
} else if ([colorName isEqualToString:@"yellow"]) {
_viewController.view.backgroundColor = [UIColor yellowColor];
}
}];
}
Native 调用JS实例:
Native 上UI界面上随便写个iOS 按钮就行了。
- (void)testCallBack:(id)sender {
[_myBridge callHandler:@"testJavascriptHandler" data:@{@"key":@"name",@"value":@"Jakin"} responseCallback:^(id responseData) {
}];
}
前端代码js文件代码:
window.onerror = function(err) {}
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)
}
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
var message = JSON.stringify(data);
var div = document.getElementById('testMessage');
var pElement = document.createElement('p');
pElement.innerText = message;
div.appendChild(pElement);
var responseData = { 'Javascript Says':'Right back atcha!' } responseCallback(responseData); })
var reloadPageButton = document.getElementById('reloadPage');
reloadPageButton.onclick = (function (e) {
e.preventDefault();
bridge.callHandler('reloadPage', {'foo': 'bar'}, function(response) { }) })
var callbackButton = document.getElementById('gotoPage');
callbackButton.onclick = function(e) {
e.preventDefault() ;
bridge.callHandler('testObjcCallback', {'foo': 'bar'}, function(response) { }) }
var element = document.getElementById('selectType');
element.onchange = function (e) {
e.preventDefault();
var SId = element.options[element.selectedIndex].value;
bridge.callHandler('changeBackground', {'key': SId},function(response) {
})
}})
hbs文件代码，前端代码写的也比较粗糙。这里页面是使用handlebars后端渲染出来，具体使用不介绍了。
<h1> {{title}}</h1>
<button id="gotoPage" style="width: 100px; height: 50px; background-color: #00B7FF; margin-left: 40px;"> 跳转页面</button>
<button id="reloadPage" style="width: 100px; height: 50px; background-color: #880000; margin-right: 40px;float: right"> 刷新webview</button><div style="margin-top: 10px">
<select style="width: 100px" id="selectType">
<option value="blue">蓝色</option>
<option value="green">绿色</option>
<option value="red">红色</option>
<option value="yellow">黄色</option>
</select>
</div><div id="testMessage">
</div><script src="javascripts/webViewJSBridgeDemo.js"></script>
网友评论