现在的APP使用到HTML5与Native混合开发技术的越来越多，似乎HTML5真有取代Native的趋势，这也是目前移动开发的潮流吧。
iOS下的混合开发主要还是用UIWebView或者WKWebView，具体用到哪个取决于你的APP支持到的iOS版本，WKWebView是iOS8以后加入的，UIWebView可以追溯到苹果手机系统2.0时代了。
我是直接加载本地HTML文件的方式，下面简单记录一下。
1、将HTML文件导入到xcode
Create Groups 和 Create folder references 的区别就在于会不会被编译。
图片.png
注意选择 Create folder references
2、利用webView加载html文件
- UIWebView/WKWebView：
- (void) loadLocalHtml:(NSString *)namePath{
NSURL *filePath = [[NSBundle mainBundle] URLForResource:@"zhancheng/list.html" withExtension:nil];
NSURLRequest *request = [NSURLRequest requestWithURL:filePath];
[_webView loadRequest:request];
}
没啥好说的，直接加载urlRequest。
由于没有建组，没有经过编译，所以要找到这个文件就需要添加声明，"xxx/list.html"。
///
3、OC调用JS方法
- 两个webView没有区别，都可以这样写。
- (IBAction)showMore:(id)sender {
NSMutableDictionary *dic = [NSMutableDictionary new];
int x = arc4random()%1000;
NSString *idstr = [NSString stringWithFormat:@"%d",x];
[dic setObject:idstr forKey:@"id"];
[dic setObject:@"imags/1.jpg" forKey:@"img_url"];
[dic setObject:@"标题2211" forKey:@"title"];
[dic setObject:@"内容内容内容内容内容内容" forKey:@"content"];
NSData *jsonData = [NSJSONSerialization dataWithJSONObject:dic options:NSJSONWritingPrettyPrinted error:nil];
NSString *jsonStr = [[NSString alloc] initWithData:jsonData encoding:NSUTF8StringEncoding];
NSString *jsStr = [NSString stringWithFormat:@"add_content('%@')",jsonStr];
NSLog(@"%@",jsStr);
NSString *jsRStr = [jsStr stringByReplacingOccurrencesOfString:@"\n" withString:@""];
[_webView stringByEvaluatingJavaScriptFromString:jsRStr];
}
主要就是这句
[_webView stringByEvaluatingJavaScriptFromString:jsRStr];
注意JS方法名一定要完全一样，包括括号。如果参数是字符串还要注意加上单引号，其他类型不能加，否则JS不会执行。
另外一个有点拙计的问题是传入的参数格式也要完全一致，否则也是不会执行，上面的将换行"\n"删除才能拼接成JS可以接受的参数格式。
4、JS调用OC方法
这里就用到了alert方法调用iOS弹框
function add_content(data_str){
alert(data_str);
}
当然也可以利用alert传值给OC，自定义弹框风格
- UIWebView：
需要自定义一个类别。UIWebView本身没有提供此方法，而在WKWebView中已经写在WKUIDelegate中
.h文件：
@interface UIWebView (JavaScriptAlert)
-(void)webView:(UIWebView *)sender runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WebFrame *)frame;
-(BOOL)webView:(UIWebView *)sender runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WebFrame *)frame;
@end
.m文件：
@implementation UIWebView (JavaScriptAlert)
static BOOL diagStat = NO;
-(void)webView:(UIWebView *)sender runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WebFrame *)frame{
UIAlertView* dialogue = [[UIAlertView alloc]initWithTitle:nil message:message delegate:nil cancelButtonTitle:@"Okay" otherButtonTitles:nil, nil];
[dialogue show];
[dialogue autorelease];
}
-(BOOL)webView:(UIWebView *)sender runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WebFrame *)frame{
//message 就是JS要传的值
UIAlertView* dialogue = [[UIAlertView alloc] initWithTitle:nil message:message delegate:self cancelButtonTitle:NSLocalizedString(@"Okay", @"Okay") otherButtonTitles:NSLocalizedString(@"Cancel", @"Cancel"), nil];
[dialogue show];
while (dialogue.hidden==NO && dialogue.superview!=nil) {
[[NSRunLoop mainRunLoop] runUntilDate:[NSDate dateWithTimeIntervalSinceNow:0.01f]];
}
[dialogue release];
return diagStat;
}
-(void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{
if (buttonIndex==0) {
diagStat=YES;
}else if(buttonIndex==1){
diagStat=NO;
}
}
@end
- WKWebView
直接一个代理方法就行了，要注意的是 completionHandler() 一定要有，否则直接崩溃
看了一下注释
@param completionHandler The completion handler to call after the alert panel has been dismissed
应该是不写上的话会导致循环引用吧。
也可以在completionHandler里对JS代码进行一些处理，例如可以返回NO或者YES，或者其他JS需要处理的值，比如输入框textInput用户输入的值。
下面是三个弹框中的alertPanel的代理
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{
completionHandler();
NSLog(@"%@",message);
}
图片.png
运行效果
