在我們對一些界面的詳情頁面進行編程時（類似如新聞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]];