使用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]];