GRMustache 的使用
GRMustache 是用 Objective-C 编写的 Mustache 模板引擎,适用于 MacOS Cocoa 和 iOS。
1. 项目中使用 GRMustache
通过 Cocoapods 导入 GRMustache 时,在 Podfile 文件中添加如下代码:
pod 'GRMustache', '~> 7.3.2'
2. 创建模版文件
创建并编写一个 HTML 模版文件,命名为 template.html
并保存到项目中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<H1> {{name}} </H1>
<P> {{content}} </P>
</body>
</html>
模版文件中的标签用双圆括({{tag}}
)号表示。在以上的模版文件,{{name}}
和 {{content}}
都是标签,你可以把标签理解为占位符,在渲染模版文件时,我们会用动态的文本内容来替换它。
3. 渲染 HTML 内容
首先在代码中将该文件读取到内存中,再使用 GRMustache
的 renderObject
方法生成渲染后的 HTML 内容:
- (NSString *)renderTemplateWithName:(NSString *)name value:(NSString *)value {
// 1.读取 template.html 文件
NSURL *bundleURL = [[NSBundle mainBundle] bundleURL];
NSURL *url = [bundleURL URLByAppendingPathComponent:@"template.html"];
NSString *template = [NSString stringWithContentsOfURL:url encoding:NSUTF8StringEncoding error:nil];
// 2.要渲染的数据
NSDictionary *renderObject = @{ @"name": name, @"content": value };
// 3.生成渲染数据
NSString *content = [GRMustacheTemplate renderObject:renderObject fromString:template error:nil];
return content;
}
4. 通过 WKWebView 加载 HTML 内容
使用 GRMustache 模版引擎渲染并生成 HTML 内容后,即可通过 WKWebView
加载 HTML 内容了:
// 通过模版引擎渲染得到内容
NSURL *bundleURL = [[NSBundle mainBundle] bundleURL];
NSString *htmlString = [self renderTemplateWithName:@"我是一级标题名称" value:@"我是页面内容"];
[self.webView loadHTMLString:htmlString baseURL:bundleURL];
执行上述代码前,你还需要在视图控制器中添加一个 WKWebView
作为当前视图控制器的子视图。
5. 总结
GRMustache 到底实现了什么功能???
这是我们的 HTML 模版文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<H1> {{name}} </H1>
<P> {{content}} </P>
</body>
</html>
然后给定以下一个简单的哈希表(JSON 字典):
{
"name": "我是一级标题名称",
"value": "我是页面内容"
}
GRMustache 渲染并生成了以下文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<H1> 我是一级标题名称 </H1>
<P> 我是页面内容 </P>
</body>
</html>
最后,我们再通过 WKWebView 显示该 HTML 文件:
6. 续
以上示例中,使用 GRMustache 中的类方法 renderObject: fromString: error:
时,我们提前将模版文件(即 template.html
文件)作为字符串加载进内存作为模版字符串,然后通过 GRMustache 渲染此模板字符串的对象,最后通过 WKWebView 显示。
这里多了一个预加载模版字符串文件的步骤,那我们能不能省略这一个步骤,直接渲染加载呢?
通过 GRMustache 中的另一个类方法 renderObject: fromResource: bundle: error:
即可实现。而且模版文件也可以写得非常简单,不必完整地声明一个 HMTL 文件。
首先,创建一个名为 template.mustache
的文件,内容如下:
<H1> {{name}} </H1>
<P> {{content}} </P>
然后,修改 GRMustache 引擎渲染方法:
- (NSString *)renderTemplateWithName:(NSString *)name value:(NSString *)value {
// 1.要渲染的数据
NSDictionary *renderObject = @{ @"name": name, @"content": value };
// 2.生成渲染数据
NSError *error = nil;
NSString *content = [GRMustacheTemplate renderObject:renderObject
fromResource:@"template"
bundle:nil
error:&error];
if (!content) {
NSLog(@"%@",error);
}
return content;
}
最后,通过 WKWebView 加载 HTML 的方法是一样的。重要的是,通过该方法可以达到加载模版字符串一样的效果。