MGTemplateEngine 模版引擎簡單使用（轉）

時間 2019-12-14

標籤 mgtemplateengine 模版引擎簡單使用简体版

原文原文鏈接

原文：http://blog.csdn.net/crazy_srufboy/article/details/21748995css

要實現的效果html

首先上圖中間的標題至內容都是使用UIWebView顯示，評論是UITableView能夠往下拖加載更多評論，也能夠增長評論同刪除評論。web

動機數組

評細頁中使用 UIWebView 會使顯示內容更加的靈活和簡單，固然你也許能夠網上找UITextView的擴展一樣也行，但我感受HTML更符合個人需求。在多年的PHP開發中咱們知道，其實詳細頁都是大同小異，主要是顯示的內容風格不一樣。但在iOS平臺上，作這些拼拼接接的活很累也不易於維護，還要不斷計算各類類型頁面對象的位置，實在吃力不討好。使用UIWebView將是一個不錯的選擇。xcode

MGTemplateEngine 模版引擎
網站

MGTemplateEngine比較象 PHP 中的 Smarty 模版引擎，是一個輕量級的引擎，簡單好用。只要設置不少不一樣的HMTL模版，就能輕鬆的實現一個View多種內容格式的顯示，對於不熟悉HTML或者減輕工做量而言，把這些工做讓設計分擔一下仍是很好的，也比較容易實現設計想要的效果。lua

首先，看看模版的代碼spa

[html] view plain copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./detail.css" rel="stylesheet">
</head>
<body>
<div id='container' name="container">
<div class="title">{{ title }}</div>
<div class="date">{{ date }}</div>
<div class="content">{{ content }}</div>
</div>
</body>
</html>

Objective-C代碼 - 下面的建立代碼MGTemplateEngine都是從官方的例子中參考下來的，已經有很詳細的說明.net

[objc] view plain copy

// Set up template engine with your chosen matcher.
MGTemplateEngine *engine = [MGTemplateEngine templateEngine];
//[engine setDelegate:self];
[engine setMatcher:[ICUTemplateMatcher matcherWithTemplateEngine:engine]];
// 這裏就是設置，或者裏邊塞變量的地方。其實也能夠設置一個數組，這樣模板的靈活也會更強。這裏我就不演示了官方有例子
[engine setObject:self.detailData[@"title"] forKey:@"title"];
[engine setObject:self.detailData[@"content"] forKey:@"content"];
// MGTemplateEngine/Detail/detail.html
// MGTemplateEngine/Detail/detail.css
NSString *templatePath = [[NSBundle mainBundle] pathForResource:@"detail" ofType:@"html"];
// Process the template and display the results.
NSString *html = [engine processTemplateInFileAtPath:templatePath withVariables:nil];
// 得到HTML
self.htmlWebView = [[UIWebView alloc] initWithFrame:CGRectMake(8, 5, 304, 320)];
self.htmlWebView.delegate = self;
self.htmlWebView.userInteractionEnabled = NO;
// 你就能加載到HTML裏面的.css文件
NSString *baseURL = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"Detail"];
[self.htmlWebView loadHTMLString:html baseURL:[NSURL fileURLWithPath:baseURL]];
[self.detailView addSubview:self.htmlWebView];

由於個人UIWebView是在插入到UITableView，因此在UIWebView加載完後，就得從新計算高度。由於我想讓用戶感受不到這實際上是一個HTML。設計

[objc] view plain copy

// 我將UIWebView添加到了self.detailView
self.listTableView.tableHeaderView = self.detailView;

[objc] view plain copy

#pragma mark -
#pragma mark -# UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
// 獲取整個HMTL的高度，這很好理解，很簡單的JS
NSString *heightString = [self.htmlWebView stringByEvaluatingJavaScriptFromString:@"document.getElementById(\"container\").offsetHeight;"];
// 重設view內容大小
CGRect nFrame = self.detailView.frame;
nFrame.size.height = [heightString doubleValue] + 35.0;
self.detailView.frame = nFrame;
// 重設webview內容大小
CGRect nWebViewFrame = self.htmlWebView.frame;
nWebViewFrame.size.height = [heightString doubleValue] + 15;
self.htmlWebView.frame = nWebViewFrame;
// 讓UIWebView加載完後，才設置UITableView,最後才加載評論
[self tableViewSetting];
[self getCommentList];
}