使用Html模版创建详情页面
在我们对一些界面的详情页面进行编程时（类似如新闻app，团购app等），有时候详情页面在使用一段时间后，需要不同排版效果，如果重新布置view页面布局，可能会浪费很多时间，产生一些麻烦。由于Html已经可以在iOS上嵌入，因此我们可以使用Html模版来，嵌套进UIwebview中进行使用，如果需要新的页面布局，只需要简单的更换Html模版，方便省事。
由于自己完全没有接触过Html编程，基本上对Html模版上的内容一窍不通，其实使用Html模版只需要了解其对应的标签，完成替换就可以了。我使用的Html模版包括三个文件：html文件（用来书写页面的内容），css文件（用来为页面布局设定），js文件（页面触发事件都在这里处理）。这三个页面我感觉类似ios的mvc开发模式。我们需要替换的标签内容主要在html文件中（代码一）。
代码一
<html> <head> <meta name="viewport" content="target-densitydpi=device-dpi,width=320,user-scalable=no"/> <link href='content.css' rel='stylesheet'/> <script src="content.js"></script> </head> <body> <div id="title_section" class="font_small"> <div id='title'>{{title}}</div> <div id='subtitle'>{{source}} <span aria-hidden="true">{{ptime}}</span></div> </div> <div id="body_section" lang="zh"> <p><div class='PRE'>{{digest}}</div></p> {{body}} <p align="right">（责任编辑：{{ec}}）</p> <p align="center"><a href="source:///{{source_url}}" class="border_link">查看原文<span></span></a></p> </div> </body> </html>
通过发送网络请求，将返回的json数据进行解析后得到一个nsdictionary，通过在model模型中进行赋值（如代码二，三），再将html中对应的标签进行简单的替换（代码四）：将返回的nsstring，加载到webview上loadHTMLString，再添加html的模版路径（代码五），就可以实现了。
代码二
@interface WebInfo : NSObject @property(nonatomic, strong) NSString *title; @property(nonatomic, strong) NSString *source; @property(nonatomic, strong) NSString *ptime; @property(nonatomic, strong) NSString *digest; @property(nonatomic, strong) NSString *body; @property(nonatomic, strong) NSString *ec; @property(nonatomic, strong) NSString *sourceurl; @property(nonatomic, strong) NSArray *images; + (instancetype)infoFromDict:(NSDictionary *)dict;
代码三
+ (instancetype)infoFromDict:(NSDictionary *)dict { WebInfo *info = [[WebInfo alloc] init]; info.title = [dict objectForKey:@"title"]; info.source = [dict objectForKey:@"source"]; info.ptime = [dict objectForKey:@"ptime"]; info.digest = [dict objectForKey:@"digest"]; info.body = [dict objectForKey:@"body"]; info.ec = [dict objectForKey:@"ec"]; info.sourceurl = [dict objectForKey:@"source_url"]; NSArray *images =[dict objectForKey:@"img"]; info.images = [ImageInfo arrayFromArray:images]; return info; }
代码四
// HTML标记 #define HtmlBody @"{{body}}" #define HtmlTitle @"{{title}}" #define HtmlSource @"{{source}}" #define HtmlPTime @"{{ptime}}" #define HtmlDigest @"{{digest}}" #define HtmlSourceURL @"{{source_url}}" #define HtmlImage @"<p><img src='%@' style='margin:auto 0; width:100%%;' />" -(NSString *)htmlConvert:(WebInfo *)Info { NSString *file = [[NSBundle mainBundle]pathForResource:@"content_template2" ofType:@"html"]; NSString *html = [[NSString alloc]initWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil]; html = [html stringByReplacingOccurrencesOfString:HtmlBody withString:Info.body]; html = [html stringByReplacingOccurrencesOfString:HtmlTitle withString:Info.title]; html = [html stringByReplacingOccurrencesOfString:HtmlPTime withString:Info.ptime]; html = [html stringByReplacingOccurrencesOfString:HtmlDigest withString:Info.digest]; html = [html stringByReplacingOccurrencesOfString:HtmlSource withString:Info.source]; return html; ｝
代码五
NSString *URLPath = [[NSBundle mainBundle]pathForResource:@"content_template" ofType:@"html"]; NSString *htmlString = [self htmlConvert:Info]; UIWebView * web = [[UIWebView alloc]initWithFrame:self.view.frame]; web.delegate = self; [self.view addSubview:web]; [web loadHTMLString:htmlString baseURL:[NSURL URLWithString:URLPath]];
