在实际开发中，UIWebView控件接受一个HTML内容，用于相应的界面，下面是该API的接口:

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

由于HTML内容通常是变化的，所以我们需要在内存中生成该HTML内容。比较简单粗暴的做法是将该HTML的基本内容定义在一个NSString中，然后用[NSString stringWothFormat]方法将内容进行格式化，示例如下：

//给对应的标签格式化内容

-(NSString *)demoFormatWithName:(NSString *)name value:(NSString *)value{

    NSString *html =

    @"<!DOCTYPE html>\n"

    "<html lang=\"zh-cn\">\n"

    "<head>""\n"

    "<meta charset=\"utf-8\">\n"

    "<title>这是一个HTML测试</title>\n"

    "</head>\n"

    "<body>\n"

    "<h1>%@</h1>\n"

    "<p>%@</p>\n"

    "<img src=\"http://img3.redocn.com/20131012/Redocn_2013101208320171.jpg\" width=\"256\" height=\"128\"><br><hr>\n"

    "</body>\n"

    "</html>";

    NSString *content = [NSString stringWithFormat:html,name,value];

    return content;

}

但其实我们可以看出，这样写并不舒服，因为：

1、模板内容和代码混在一起，既不方便阅读，也不方便更改；

2、模板内容的渲染逻辑使用简单的[NSString stringWothFormat]来完成，功能单一。在实际开发中，我们很可能需要就原始数据进行二次处理，而这些如果模板渲染模块不能支持，我们就只能自己手工鞋这部分数据二次处理，费时费力。例如，微博的详情页面，如果微博的发送时间小于1天，则需要显示成"xxx小时前"，如果小于1分钟，则需要显示成"刚刚"。这些界面渲染方便的逻辑如果能够抽取到专门的排版代码中，则会清晰很多。

所以我们需要一个模板引擎，专门负责这类渲染的工作。

模板引擎复杂的有：MGTemplateEngine(http://mattgemmell.com/mgtemplateengine-templates-with-cocoa/),它的模板语言比较像Smarty、FreeMarker和Django。另外它可以自由的定义Filter，以便实现上面提到的自定义渲染逻辑。它需要依赖RegexKit，RegexKit是一个正则表达式工具类，提供强大的表达式匹配和替换功能。

也有简单的是：GRMustache(https://github.com/groue/GRMustache),它比MGTemplateEngine的功能更简单。另外GRMustache在开源社区更加活跃、更新更加频繁。

对于上面的示例代码，在使用GRMustache模板后，我们首先需要调整模板的内容：

1、将模板内容放在一个单独的文件中，方便日后更改，如template.html

2、将原来的%@替换成{{ name }}的形式。

例如调整后的模板内容为:(文件名为：template.html)

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title>这是一个HTML测试</title>

</head>

<body>

    <h1> {{ name }} </h1>

    <p> {{ content }} </p>

    <img src="http://img3.redocn.com/20131012/Redocn_2013101208320171.jpg" width="256" height="128"><br><hr>

</body>

</html>

即如图：template.html

然后我们在代码中将该文件读取到内存中，再使用GRMustache的renderObject方法生成渲染后的HTML内容，示例代码如下：

//给template.html中对应的标签格式化内容

-(NSString *)demoFormatWithName:(NSString *)name value:(NSString *)value{

    NSString *fileName = @"template.html";

    NSString *path = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:fileName];

    NSString *template = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];

    NSDictionary *renderObject = @{@"name":name,@"content":value};

    NSString *content = [GRMustacheTemplate renderObject:renderObject fromString:template error:nil];

    return content;

}

这样，我们使用GRMustache模板引擎成功完成了HTML内容的渲染工作，之后就可以通过UIWebView来加载HTML的内容了：

    _webView = [[UIWebView alloc] initWithFrame:self.view.bounds];

    [self.view addSubview:_webView];

    //通得模板渲染得到内容(可以随时修改对应标签的内容)

    NSString *rendering = [self demoFormatWithName:@"标题" value:@"内容"];

    NSString *path = [[NSBundle mainBundle] bundlePath];

    NSURL *baseUrl = [NSURL fileURLWithPath:path];

    [self.webView loadHTMLString:rendering baseURL:baseUrl];

下载GRMustache框架如下：

  

Code:

#import "ViewController.h"

#import <GRMustache.h>

@interface ViewController ()

@property (strong,nonatomic)UIWebView *webView;

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    _webView = [[UIWebView alloc] initWithFrame:self.view.bounds];

    [self.view addSubview:_webView];

    //通得模板渲染得到内容(可以随时修改对应标签的内容)

    NSString *rendering = [self demoFormatWithName:@"标题" value:@"内容"];

    NSLog(@"\n%@",rendering);

    NSString *path = [[NSBundle mainBundle] bundlePath];

    NSURL *baseUrl = [NSURL fileURLWithPath:path];

    [self.webView loadHTMLString:rendering baseURL:baseUrl];

}

//给template.html中对应的标签格式化内容

-(NSString *)demoFormatWithName:(NSString *)name value:(NSString *)value{

    NSString *fileName = @"template.html";

    NSString *path = [[[NSBundle mainBundle] bundlePath] stringByAppendingPathComponent:fileName];

    NSString *template = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];

    NSDictionary *renderObject = @{@"name":name,@"content":value};

    NSString *content = [GRMustacheTemplate renderObject:renderObject fromString:template error:nil];

    return content;

}

@end

打印渲染后HTML内容如下：

-- ::42.629 JSWeb[:] 

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title>这是一个HTML测试</title>

</head>

<body>

    <h1> 标题 </h1>

    <p> 内容 </p>

    <img src="http://img3.redocn.com/20131012/Redocn_2013101208320171.jpg" width="" height=""><br><hr>

</body>

</html>

webView显示渲染后的HTML内容如下：

GRMutstache提供的渲染HTML内容的核心类方法大概有如下这些：

+ (instancetype)templateFromString:(NSString *)templateString error:(NSError **)error;

+ (instancetype)templateFromResource:(NSString *)name bundle:(NSBundle *)bundle error:(NSError **)error;

+ (instancetype)templateFromContentsOfFile:(NSString *)path error:(NSError **)error;

+ (instancetype)templateFromContentsOfURL:(NSURL *)URL error:(NSError **)error;

+ (NSString *)renderObject:(id)object fromString:(NSString *)templateString error:(NSError **)error;

+ (NSString *)renderObject:(id)object fromResource:(NSString *)name bundle:(NSBundle *)bundle error:(NSError **)error;

作者提供的示例如：

// Renders "Hello Arthur!"

NSString *rendering = [GRMustacheTemplate renderObject:@{ @"name": @"Arthur" } fromString:@"Hello {{name}}!" error:NULL];
// Renders the `Profile.mustache` resource of the main bundle

NSString *rendering = [GRMustacheTemplate renderObject:user fromResource:@"Profile" bundle:nil error:NULL];
//Reuse templates in order to avoid parsing the same template several times:

GRMustacheTemplate *template = [GRMustacheTemplate templateFromResource:@"Profile" bundle:nil error:nil];

rendering = [template renderObject:arthur error:NULL];

rendering = [template renderObject:barbara error:NULL];

rendering = ...

更多详情内容查看github上的源码：https://github.com/groue/GRMustache

本文参考书籍：《iOS开发进阶--唐巧》

iOS：使用模板引擎渲染HTML界面的更多相关文章

  1. Spring Boot☞ 使用Thymeleaf模板引擎渲染web视图

    静态资源访问 在我们开发Web应用的时候,需要引用大量的js.css.图片等静态资源. 默认配置 Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则: /s ...

  2. SpringBoot：2.SpringBoot整合Thymeleaf模板引擎渲染web视图

    在Web开发过程中,Spring Boot可以通过@RestController来返回json数据,那如何渲染Web页面?Spring Boot提供了多种默认渲染html的模板引擎,主要有以下几种: ...

  3. express使用ejs模板引擎渲染html文件

    小场景小知识点. 在使用express过程中,按照官网教程,利用express生成器很容易初始化express项目模板. 那么初始化项目之后应该如何使用ejs作为模板引擎呢?如下 // 注释掉默认生成 ...

  4. Spring Boot☞ 使用freemarker模板引擎渲染web视图

    效果图 代码 package com.wls.integrateplugs.hello.controller; /** * Created by wls on 2017/8/24. */ import ...

  5. Handlebars模板引擎渲染页面

    基本使用 js: var testTpl = Handlebars.compile($('#test').html()); //模板 var arr = [1,2,3] //数据 $('#box'). ...

  6. 用模板引擎Art-Template渲染空格或换行符引发的一场“命案”

    一.绪论 说实话,真的不知道如何给这篇博客命名,因为我觉得应该有一些小伙伴遇到跟我同样的问题正在抓耳挠腮中. 二.导火索 最近在做一个移动H5翻页的功能,类似于MAKA模板那种.假设大致框架如下 ​ ...

  7. 高性能JavaScript模板引擎原理解析

    随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC ...

  8. SpringBoot系列：Spring Boot使用模板引擎FreeMarker

    一.Java模板引擎 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. 在jav ...

  9. SpringBoot系列：Spring Boot使用模板引擎Thymeleaf

    一.Java模板引擎 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. 在jav ...

随机推荐

  1. AngularJS Bootstrap

    AngularJS 的首选样式表是 Bootstrap. 可以在 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: < ...

  2. Python 中xrange和range区别

    先看看Python help()的说明 help(range) Help on built-in function range in module __builtin__: range(...) ra ...

  3. MyBatis学习（二）

    mybatis开发dao的方法 作用范围 SqlSessionFactoryBuilder是以工具类方式来使用,需要创建sqlSessionFactory就new一个SqlSessionFactory ...

  4. RHCS 6.5 由于resource-agents-3.9.2-40.el6版本过低导致rgmanager[61164]: [fs] umount failed - REBOOTING问题的解决

    問題描述: RHEL 6.5版本RHCS在disable或者relocate service的時候,會導致節點重啟,查看日誌顯示umount掛载點失敗,日誌如下: Nov 29 16:03:50 ph ...

  5. [IDEA] 快捷键学习

    IntelliJ Idea 常用快捷键列表   Alt+回车 导入包,自动修正Ctrl+N   查找类Ctrl+Shift+N 查找文件Ctrl+Alt+L  格式化代码 Ctrl+Alt+O 优化导 ...

  6. 第二十七篇：SOUI中控件属性查询方法

    SOUI项目的SVN根目录下有一个doc目录,下面有一份控件属性表.包含了大部分控件的大部分属性,不过也不一定完全准确.最保险的办法还是查源代码. SOUI对象包含控件及ISkinObj等从SObje ...

  7. hdu 5073

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5073 思路:一开始忘了排序,wa了好几发...选择区间长度为N - K的连续的数, 然后其余的K个数都 ...

  8. 关于activity的生命周期的随笔

    在activity的生命周期中,我总是容易混淆,onstart和on resume ,on pause和onstop 原来这个都是一对的. onstart 对应 onstop ,意义在于使页面显示出来 ...

  9. 【Oracle】Oracle 序列步长问题

    问题: 数据库中客户表的ID 变化为 21\31\41 有序数字,而不是1\2\3 依次增长 [问题原因]: SEQ_CUSTOMNOTEEN 设置了缓存20,每次取20个数,然后一个一个给你,如果中 ...

  10. 设置 tableview 的背景颜色,总是有蒙层

    1.给tableview添加了背景图片后, cell 总是有一层蒙层蒙着,很阴暗. 2.实验以后才发现背景图片被放在了 cell 的后面.