ホームページ > 記事 > ウェブフロントエンド > UIWebView - テンプレート エンジンを使用して iOS_html/css_WEB で HTML インターフェイスをレンダリングする - ITnose
UIWebView - テンプレート エンジンを使用して iOS_html/css_WEB で HTML インターフェイスをレンダリングする - ITnose
- WBOYオリジナル
- 2016-06-21 08:59:041121ブラウズ
実際の iOS 開発では、UIWebView を使用してデータを読み込むシナリオが多くあります。多くの場合、サーバーから HTML コンテンツを動的に取得し、アプリがその HTML コンテンツを動的に処理して UIWebView に表示します。使用される API インターフェイスは次のとおりです。
- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;従来の方法
HTML コンテンツは通常変更されるため、HTML コードを動的に生成する必要があります。通常、タイトル、時刻、作成者、および対応するコンテンツをサーバー側から取得し、これらのデータを処理して HTML 文字列に結合する必要があります。従来のアプローチでは、以下に示すように、置換する必要がある上記のコンテンツのプレースホルダーをいくつか入力し、(content.html) などの指定されたファイルに配置して、それを使用します。指定された場所に 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>
生成されるインターフェイスは次のとおりです
- (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;} 実際に使ってみると、まだまだ問題点が多いことが分かりますが、たとえば、データを前処理する必要がある場合、多数の
置換を記述するのはあまりユーザーフレンドリーではなく、一部の特殊文字には特別な処理が必要です。この記事では主にMGTemplateEngineとGRMustacheの使い方を紹介します。
- (NSUInteger)replaceOccurrencesOfString:(NSString *)target withString:(NSString *)replacement options:(NSStringCompareOptions)options range:(NSRange)searchRange;MGTemplateEngine
MGTemplateEngine は、AFNetworking の作者である Matt の作品であり、そのテンプレート言語は Smarty、FreeMarker、Django に似ています。さらに、(カスタム レンダリング ロジックを実装するために) カスタム フィルターをサポートでき、正規表現ツール クラス RegexKit に依存する必要があります。
テンプレートの作成
HTML 文字列のレンダリングと生成
<!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>
説明
(1) MGTemplateEngine が提供するサンプルプログラムは Mac OS 上で動作します。iOS で使用する場合は、Foundation フレームワークと UIKit を導入する必要があります。 (2) Xcode6 以上の環境で作成されたプロジェクトの場合は、 PCH ファイルはエラーを報告する可能性があり、MGTemplateEngine の各ヘッダー ファイルに Foundation フレームワークを導入する必要があります (3) GitHub 上の MGTemplateEngine のアドレスは https://github.com/mattgemmell/MGTemplateEngine です。// 第二种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];(4) この Web ビューの高さを計算したい場合は、f47f6cb5e338026c210cea3ef006f563
NSString *heightString = [webViewstringByEvaluatingJavaScriptFromString:@"document を追加します。 getElementById ("container").offsetHeight;"];
GRMustache
GRMustache の使用方法 "GRMustache Document" 例
典型的な Mustache テンプレート: template
次のハッシュを指定すると: 代入は以下を生成します: 結果の Web ページ
Hello fs_nameYou have just won fs_value dollars!fs_#in_caWell, fs_taxed_value dollars, after taxes.fs_/in_caコード:
{ "name": "Chris", "value": 10000, "taxed_value": 10000 - (10000 * 0.4), "in_ca": true} 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];
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。