UIWebView---iOS中使用模板引擎渲染HTML界面來源：極客頭條 在iOS實際的開發(fā)中,，使用UIWebView來加載數(shù)據(jù)使用的場景特別多。很多時候我們會動態(tài)的從服務(wù)器獲取一段HTML的內(nèi)容，然后App這邊動態(tài)的處理這段HTML內(nèi)容用于展示在UIWebView上。使用到的API接口為： - (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL; <!DOCTYPE html><html> <head> <title>key_title</title> </head> <body> <div> <div> <h2>key_title</h2> <div>key_date key_author</div> <hr/> </div> <div>key_content</div> </div> </body></html>然后在指定的地方使用如下的方式動態(tài)生成HTML代碼： - (NSString *)loadHTMLByStringFormat:(NSDictionary *)data{ NSString *templatePath = [[NSBundle mainBundle] pathForResource:@"template" ofType:@"html"]; NSMutableString *html = [[NSMutableString alloc] initWithContentsOfFile:templatePath encoding:NSUTF8StringEncoding error:nil]; [html replaceOccurrencesOfString:@"key_title" withString:data[@"title"] options:NSCaseInsensitiveSearch range:NSMakeRange(0, html.length)]; [html replaceOccurrencesOfString:@"key_author" withString:data[@"author"] options:NSCaseInsensitiveSearch range:NSMakeRange(0, html.length)]; [html replaceOccurrencesOfString:@"key_date" withString:data[@"date"] options:NSCaseInsensitiveSearch range:NSMakeRange(0, html.length)]; [html replaceOccurrencesOfString:@"key_content" withString:data[@"content"] options:NSCaseInsensitiveSearch range:NSMakeRange(0, html.length)]; return html;}生成界面如下  在實際的使用中發(fā)現(xiàn)還是存在不少的問題,，比如我們需要對數(shù)據(jù)進行預(yù)先處理的時候需要寫大量的 - (NSUInteger)replaceOccurrencesOfString:(NSString *)target withString:(NSString *)replacement options:(NSStringCompareOptions)options range:(NSRange)searchRange;這樣的替換，而且對于一些特殊的字符還需要進行特殊處理等,，實在不是太友好,，這樣就需要一個引擎來專門處理這些事情，本文主要介紹MGTemplateEngine和GRMustache的使用,。 MGTemplateEngine MGTemplateEngine是AFNetworking的作者Matt的作品,，它是一個比較流行的模板引擎，它的模板語言比較類似于Smarty,、FreeMarker和Django,。另外它可以支持自定義的Filter（以便實現(xiàn)自定義的渲染邏輯），需要依賴正則表達式的工具類RegexKit,。 創(chuàng)建模板 <!DOCTYPE html><html> <head> <title>fs_title</title> </head> <body> <div> <div> <h2>fs_title</h2> <div>fs_date fs_author</div> <hr/> </div> <div>fs_content</div> </div> </body></html>渲染生成HTML字符串 // 第二種MGTemplateEngine MGTemplateEngine *engine = [MGTemplateEngine templateEngine]; [engine setDelegate:self]; [engine setMatcher:[ICUTemplateMatcher matcherWithTemplateEngine:engine]]; NSString *templatePath = [[NSBundle mainBundle] pathForResource:@"MGTemplateEngineTemplate" ofType:@"html"]; // 第一種賦值方式 [engine setObject:variables[@"title"] forKey:@"title"]; [engine setObject:variables[@"author"] forKey:@"author"]; [engine setObject:variables[@"date"] forKey:@"date"]; [engine setObject:variables[@"content"] forKey:@"content"]; NSString *htmlString = [engine processTemplateInFileAtPath:templatePath withVariables:nil]; // 第二種賦值方式 // Process the template and display the results.// NSString *htmlString = [engine processTemplateInFileAtPath:templatePath withVariables:variables]; NSLog(@"Processed template:\r%@", htmlString); [self.webView loadHTMLString:htmlString baseURL:nil];說明 （1）MGTemplateEngine提供的示例程序是運行在Mac OS上的,，如果要使用到iOS上面需要引入Foundation框架,還需要個UIKit （2）對于運行在Xcode6以上的環(huán)境下創(chuàng)建的工程由于沒有PCH文件可能會報錯，需要在MGTemplateEngine的各個頭文件中引入Foundation框架 （3）MGTemplateEngine在GitHub上的地址為https://github.com/mattgemmell/MGTemplateEngine,。 (4) 如果要算出這個webview的高度 在div加上 NSString *heightString = [webViewstringByEvaluatingJavaScriptFromString:@"document.getElementById(\"container\").offsetHeight;"]; GRMustache GRMustache使用方法 《GRMustache Document》 舉個例子 A typical Mustache template:模板 Hello fs_nameYou have just won fs_value dollars!fs_#in_caWell, fs_taxed_value dollars, after taxes.fs_/in_caGiven the following hash:賦值 { "name": "Chris", "value": 10000, "taxed_value": 10000 - (10000 * 0.4), "in_ca": true} Will produce the following:得出的網(wǎng)頁 Hello ChrisYou have just won 10000 dollars!Well, 6000.0 dollars, after taxes.代碼： NSString *template = [[NSBundle mainBundle] pathForResource:@"MGTemplateEngineTemplate" ofType:@"html"];// 注意要對路徑進行UTF8編碼 不然會有問題NSString *templatePath = [NSString stringWithContentsOfFile:template encoding:NSUTF8StringEncoding error:nil];NSString *htmlString = [GRMustacheTemplate renderObject:variables fromString:templatePath error:nil];[self.webView loadHTMLString:htmlString baseURL:nil]; 即使是一小步
也想與你分享 |
|
|
