iOS 模版引擎加速web预览

在iOS开发中大家对于有些功能和模块不可避免的需要使用HTML来加速开发和实现功能的快速变更,例如：预览和活动页面。 基于需求的不断变更大家很多采用的H5来做，或者之前比较火的phonegap，吵得火热的RN都是为了兼顾开发速度和用户体验，但是再怎么搞这些跨平台的都是天空中划过的流行---不是太过臃肿就是体验太差…… 最近项目需求中对于之前稳定的模块提出了新的需求：

1. 针对已有的采用html的预览导致的缓慢进行优化
2. 针对历史工单进行缓存浏览 下面我们查看一下工单（其一）：

针对上图的工大采用Native开发显然是不太实际，采用html让webview来加载时目前来说最后的方法，但是目前来说户外采用基站来加载数据往往需要5s ……

Q 那么问题来啦，移动端web需要加载哪些文件呢？

A bootstrap js 图片

Q 当网络环境比较差的时候如何？ A 啊欧你们发查看啦，资源文件没加载完全就要超时了?

那么我们怎么来处理呢？可以采用模版数据分离的方式，即：模版引擎。通过模版的我们可以将数据，模版，webview以及模版分离。 那么问题来了--采用引擎能达到那种效果呢，有什么好处呢？

1. 加速web预览速度
2. 使用web达到类似native的体验
3. 数据模版分离假如只是UI展示变更无需发布App
4. 引擎渲染数据加载本地资源文件html js 图片减少数据传输

stencil语法介绍

There are {{ articles.count }} articles. <ul> {% for article in articles %} <li>{{ article.title }} by {{ article.author }}</li> {% endfor %} </ul>

import Stencil struct Article { let title: String let author: String } let context = [ "articles": [ Article(title: "Migrating from OCUnit to XCTest", author: "Kyle Fuller"), Article(title: "Memory Management with ARC", author: "Kyle Fuller"), ] ] let environment = Environment(loader: FileSystemLoader(paths: ["templates/"])) let rendered = try environment.renderTemplate(name: "article_list.html", context: context) print(rendered)

针对OC中调用

import UIKit import Stencil import PathKit import WebKit @objc public class StencilEngine: NSObject { let environment:Environment let localBundle: Bundle @objc public init( bundlePath: String) { localBundle = Bundle.init(path: bundlePath)! environment = Environment(loader: FileSystemLoader.init(bundle: [ self.localBundle, Bundle.main])) } @objc public func render(for webView: UIWebView, templateFileName: String, bundle: Bundle , context:[String:Any]?)throws-> String{ do{ let html = try environment.renderTemplate(name: templateFileName, context: context) webView.loadHTMLString(html, baseURL: self.localBundle.bundleURL) return html }catch{ throw error } } @objc public func render(forUiWebView webView: UIWebView, templateFileName: String, bundle: Bundle , context:[String:Any]?)throws-> String{ do{ let html = try environment.renderTemplate(name: templateFileName, context: context) webView.loadHTMLString(html, baseURL: self.localBundle.bundleURL) return html }catch{ throw error } } }

简单使用

StencilEngine * engine = [[StencilEngine alloc] initWithBundlePath:_bundlePath]; _html = [engine renderFor:self.webView templateFileName:self.templateFileName bundle:[[NSBundle alloc] initWithPath:_bundlePath] context:jsonObj error:&engineError]; if (engineError) { [self showError:engineError]; }

引擎岁好用，使用请谨慎