首页 > web前端 > html教程 > UIWebView-iOS中使用模板引擎渲染HTML界面_html/css_WEB-ITnose

UIWebView-iOS中使用模板引擎渲染HTML界面_html/css_WEB-ITnose

WBOY
发布: 2016-06-21 08:59:04
原创
1150 人浏览过

在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。

创建模板

<!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以上的环境下创建的工程由于没有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_ca
登录后复制
Given the following hash:赋值
{  "name": "Chris",  "value": 10000,  "taxed_value": 10000 - (10000 * 0.4),  "in_ca": true}
登录后复制
Will produce the following:得出的网页
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];
登录后复制
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板