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]; }

引擎岁好用,使用请谨慎

原文发布于微信公众号 - 大话swift(gh_ca2266b7cab0)

原文发表时间:2019-01-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券