动态的通过webView加载html文件,这样就可以实时更新Html的内容,给用户更好的体验效果。iOS早期的中,主要是通过UIWebView来实现这个功能,好,告诉你,iOS8以后,有了一个WKWebView,用它,用它,用它。性能、内存绝对是一个很大的优化的体验。本文,从两个角度讲述,WKWebView的使用。##使用原声代码实现WKWebView使用稍等、待续##使用绝壁的第三方来实现WKWebView使用WebViewJavascriptBridge的作者也做了一套支持WKWebView与JS交互的第三方框架:。(WKWebViewJavascriptBridge)>cocoaPods: pod ‘WebViewJavascriptBridge’, ‘~> 5.0.5’>github地址:https://github.com/marcuswestin/WebViewJavascriptBridge安装上,我们开始玩耍!注意:先将我们提前写好的HTML放到服务上,为了模拟的更逼真点,这里采用XAMPP开了服务,放进去HTML代码
使用:###注意事项 1、http要适配修改info文件NSAppTransportSecurityNSAllowsArbitraryLoads
2、要引入
#import// 使用WKwebview要导入此文件
3、WKWebViewJavascriptBridge包含了UIWebView跟WKWebView。因此要注意导入的头文件JS调用Objective1、data js传递给原生的参数2、responseCallback 原生回调js的方法
[_bridge registerHandler:@"Login" handler:^(id data, WVJBResponseCallback responseCallback) { NSLog(@"JS called Objective,objectie get js param: %@", data); // 写登录逻辑判断 NSDictionary * returnData = @{@"data":@"登录成功"}; responseCallback(returnData); }];
###完整的Objective代码```#import "ViewController.h"#import// 使用WKwebview要导入此文件#import@interface ViewController ()@property (weak, nonatomic) IBOutlet UILabel *lblLog;
@property (weak, nonatomic) IBOutlet UIButton *buttonCallBack;
@property WKWebViewJavascriptBridge* bridge;
@end
@implementation ViewController
- (IBAction)ocCallJS:(id)sender {
id data = @{@"data": @"oc调js啦"};
[self.bridge callHandler:@"callJS" data:data responseCallback:^(id response) {
NSLog(@"js返回了: %@", response);
}];
}
- (void)viewDidLoad {
[super viewDidLoad];
WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame];
webView.backgroundColor = [UIColor clearColor];
webView.userInteractionEnabled = YES;
webView.navigationDelegate = self;
[WKWebViewJavascriptBridge enableLogging];// 开启日志
_bridge = [WKWebViewJavascriptBridge bridgeForWebView:webView];
[_bridge setWebViewDelegate:self];
[_bridge registerHandler:@"getJson" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"JS called Objective,objectie get js param: %@", data);
NSDictionary * returnData = @{@"data":@"objective return js param is hello world"};
responseCallback(returnData);
}];
[_bridge registerHandler:@"Login" handler:^(id data, WVJBResponseCallback responseCallback) {
NSLog(@"JS called Objective,objectie get js param: %@", data);
// 写登录逻辑判断
NSDictionary * returnData = @{@"data":@"登录成功"};
responseCallback(returnData);
}];
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://192.168.1.221/web/IOSTest/test.html"]]];// 注意html文件的路径
[self.view addSubview:webView];
[self.view bringSubviewToFront:self.lblLog];
[self.view bringSubviewToFront:self.buttonCallBack];
}
@end
Objective调用JS
1、参数1.调用js给我准备好的方法
2、参数2,原生传递给js的参数
3、参数3、js回调给原生的方法
id data = @{@"data": @"oc调js啦"};
[self.bridge callHandler:@"callJS" data:data responseCallback:^(id response) {
NSLog(@"js返回了: %@", response);
}];
##HTML代码
算了,html代码比较多,还是上传到git上面去。
##代码在这里!这里!这里!
[代码](https://git.oschina.net/freedom_coco/ObjectiveCallJs.git)
https://git.oschina.net/freedom_coco/ObjectiveCallJs.git
##注意事项
1、如果Xcode控制台有打印,而页面没有反应,那么就是页面这边报错了。通过浏览器访问下,就可以定位到问题
2、如果点击都xcode日志也没有打印,页面也没有变化,那么一般都是bridge没有成功,失败了。原生出问题了。