您的位置：首页 > 移动开发

UIWebView---iOS中使用模板引擎渲染HTML界面

2015-02-05 19:48 597 查看

参考：

iOS中使用模板引擎渲染HTML界面

在iOS实际的开发中，使用UIWebView来加载数据使用的场景特别多。很多时候我们会动态的从服务器获取一段HTML的内容，然后App这边动态的处理这段HTML内容用于展示在UIWebView上。使用到的API接口为：

-
(void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;

传统的方法

由于HTML内容通常是变化的，所以我们需要动态生成HTML代码。通常我们从服务器端获取到标题、时间、作者和对应的内容，然后我们需要对这些数据处理之后拼接成一段HTML字符串。对于传统的做法是将上面的需要替换的内容填写一些占位符，放到指定的文件中如（content.html）,如下所示：

<!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>

然后在指定的地方使用如下的方式动态生成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;
}

生成界面如下

在实际的使用中发现还是存在不少的问题，比如我们需要对数据进行预先处理的时候需要写大量的

- (NSUInteger)replaceOccurrencesOfString:(NSString *)target withString:(NSString *)replacement options:(NSStringCompareOptions)options range:(NSRange)searchRange;

这样的替换，而且对于一些特殊的字符还需要进行特殊处理等，实在不是太友好，这样就需要一个引擎来专门处理这些事情，本文主要介绍MGTemplateEngine和GRMustache的使用。

MGTemplateEngine

MGTemplateEngine是AFNetworking的作者Matt的作品，它是一个比较流行的模板引擎，它的模板语言比较类似于Smarty、FreeMarker和Django。另外它可以支持自定义的Filter（以便实现自定义的渲染逻辑），需要依赖正则表达式的工具类RegexKit。

Variables look like {{ engine.delimiters.expressionStart }} this {{ engine.delimiters.expressionEnd }} Variables look like {{ this }} （变量是这样的{{ param }}）
Filter delimiter is {{ engine.delimiters.filter }} Filter delimiter is | （过滤条件 |）

创建模板

<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
<div>
<div>
<h2>{{title}}</h2>
<div>{{date}} {{author}}</div>
<hr/>
</div>
<div>{{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以上的环境下创建的工程由于没有PCH文件可能会报错，需要在MGTemplateEngine的各个头文件中引入Foundation框架
（3）MGTemplateEngine在GitHub上的地址为https://github.com/mattgemmell/MGTemplateEngine。
(4) 如果要算出这个webview的高度在div加上 <div id='container'name="container">

NSString *heightString = [webViewstringByEvaluatingJavaScriptFromString:@"document.getElementById(\"container\").offsetHeight;"];

GRMustache

GRMustache使用方法《GRMustache
Document》

举个例子

A typical Mustache template:模板

Hello {{name}}
You have just won {{value}} dollars!
{{#in_ca}}
Well, {{taxed_value}} dollars, after taxes.
{{/in_ca}}

Given the following hash:赋值

{
"name": "Chris",
"value": 10000,
"taxed_value": 10000 - (10000 * 0.4),
"in_ca": true
}

Will produce the following:得出的网页

Hello Chris
You 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];

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航