背景
目前iOS APP的开发大体有这么几种，原生、原生与h5混合、RN以及阿里的weex。题外话，3.8女神节这天，苹果官方由于hotfix尺度太大，拒绝了一大批JSPatch。尺度大的原因可能是由于动态下发模块，App的模块可以随意配置。并且很多开发者安全意识不强，下发的js文件没有经过md5加密，存在下发过程中间篡改的风险。JSPatch的核心技术是JSC内核的应用，所以将来RN和weex会不会因为动态下发引发所谓尺度问题而受到影响还不好说。所以，比较稳妥的还是原生和混合开发模式。
直接切入正题，在使用h5混合开发模式下，WebViewJavascriptBridge在iOS工程中的使用。
感兴趣的同学先去Github上下载demo。
SDK的引入
1、如果你的工程支持pod，直接在Podfile中添加下面的脚本，然后pod install之后重启工程便好。
pod 'WebViewJavascriptBridge', '~> 5.0'
2、如果不支持，那通过上面下载demo，将WebViewJavascriptBridge文件目录拖拽到你的工程中。
代码的实现
1、JS端的配置
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、OC中的配置
引入头文件，并且定义bridge属性
#import "WebViewJavascriptBridge.h"
@interface ViewController (){
UIWebView *mWebview;
}
@property WebViewJavascriptBridge* bridge;
@end
建立绑定关系
- (void)loadWebView{
if (_bridge) {
return;
}
mWebview = [[UIWebView alloc] initWithFrame:self.view.frame];
mWebview.delegate = self;
[self.view addSubview:mWebview];
//建立绑定关系
[WebViewJavascriptBridge enableLogging];
_bridge = [WebViewJavascriptBridge bridgeForWebView:mWebview];
[_bridge setWebViewDelegate:self];
//加载h5页面
NSString *bundlePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
[mWebview loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:bundlePath]]];
3、JS注册方法供OC调用
JS方法的注册
//无返回值无回调(alertMobile 代表方法名，在OC中使用的时候必须要一一对应)
bridge.registerHandler('alertMobile', function() {
alert('13021200000');
})
//有返回值无回调（data为OC调用后传回的返回值）
bridge.registerHandler('alertName',function(data){
alert(data.name);
})
//有返回值有回调（responseCallback方法是对OC中的方法进行的回调）
bridge.registerHandler('alertMobileAndName',function(data,responseCallback){
var info = 'name:'+data.name+'\n'+'mobile:'+data.mobile;
alert(info);
responseCallback(info);
})
OC调用JS方法（请与上面JS注册的方法一一对应）
//无参数传递
[self.bridge callHandler:@"alertMobile"];
//有参数传递
[self.bridge callHandler:@"alertName" data:@{@"name":@"Li Xiaoguang"}];
//有参数有回调
[self.bridge callHandler:@"alertMobileAndName" data:@{@"name":@"Li Xiaoguang",@"mobile":@"13021200000"} responseCallback:^(id responseData) {
NSLog(@"%@",responseData);
}];
4、OC注册方法供JS调用
OC注册方法
[self.bridge registerHandler:@"showSendMsg" handler:^(id data, WVJBResponseCallback responseCallback) {
NSDictionary *dict = (NSDictionary *)data;
NSString *info = [NSString stringWithFormat:@"这是我的手机号: %@, %@ !!",dict[@"mobile"],dict[@"events"]];
NSLog(@"--------%@",info);
responseCallback(@"Response from testObjcCallback");
}];
JS调用OC注册的方法（方法名需要一一对应，参数可以是字典、数组等）
window.WebViewJavascriptBridge.callHandler('showSendMsg', {'mobile': '13300001111', 'events':'周末一起去爬山'},function(response){
document.getElementById("returnValue").value = response;
alert(response);
})
总结
本文档注重iOS开发者直接代码的嵌入，比较浅显，如有问题，我们可进行沟通讨论。
网友评论