Html5在移动互联网项目的应用 主讲人：曲毅 WWW.7LK.COM.

Presentation on theme: "Html5在移动互联网项目的应用 主讲人：曲毅 WWW.7LK.COM."— Presentation transcript:

1 Html5在移动互联网项目的应用 主讲人：曲毅

2 目录 移动端业务 1 旧版本移动端的解决方案 2 新版本移动端的解决方案 3 Crow 5 引擎功能介绍 4

3 移动端产品车轮图 移动 团购 客户端 iPad商城 手机商城 公众服务 微信 支付 达人问妆 CMS Wap 站点 HTML 5 桃花版

4 目录 移动端业务 1 旧版本移动端的解决方案 2 新版本移动端的解决方案 3 Crow 5 引擎功能介绍 4

5 旧版本移动端的解决方案 问题 1 2 3 4 业务重复性太高 各个客户端单独开发成时间及人力成本太高 客户端各版本之间维护成本太高
Android 客户端独立开发 2 iPhone 3 iPad 4 Wap站 HTML5站 独立开发 问题 业务重复性太高 各个客户端单独开发成时间及人力成本太高 客户端各版本之间维护成本太高 针对移动电商业务扩展性不高

6 目录 移动端业务 1 旧版本移动端的解决方案 2 新版本移动端的解决方案 3 Crow 5 引擎功能介绍 4

7 新版本移动端的解决方案 优点 Android客户端嵌入HTML5引擎，主体业务逻辑抽取
iPhone客户端嵌入HTML5引擎，主体业务逻辑抽取 iPad客户端嵌入HTML5引擎，主体业务逻辑抽取 Wap站、HTML5站独立开发 未来winphone和智能电视，依然可以嵌入HTML5引擎，主体业务逻辑抽取 优点 主体业务逻辑可以跨平台重用（跨平台） 各个客户端变轻，而且无需用户更新，人力和时间成本大大降低 客户端各版本之间维护成本降低 针对移动电商业务扩展性，HTML5技术可以充分发挥其优势 混合编程，灵活性高

8 具体业务的抽取 HTML 5 Android 可复用购物车 主体业务逻辑抽取，一个内核完美适配所有客户端，真正实现全平台覆盖。 微信 IOS
Win Phone 可复用购物车 使用H5技术购物车、结算等都抽象出来，未来只维护一个基础的购物车，任何项目只需要继承复用，提高购物车质量，节省成本，快速交付。 可抽象模块：购物车，结算中心，商品（团购）详情等，业务模块化，使用拼接、组装方式开发 主体业务逻辑抽取，一个内核完美适配所有客户端，真正实现全平台覆盖。

9 Crow5如何解决这些问题 ? ? ? ? ? webview打开URL？ ipad 1.0.4已经完美的植入了crow5引擎。
未来规划winphone和智能电视等。 webview打开URL？ ? 为何不用html5？慢，卡，明显的加载，不连贯。 ? Crow5引擎由哪些部分组成？ ? 移动端有哪些应用了 Crow5？ ? H5引擎为我们做了些什么？

10 02 04 01 03 技术规划 可定制化 MVC模块化 Crow 5诞生 一个强劲的引擎 异步加载 从此您的产品将具备 异步加载 动画控制
异步加载 动画控制 局部刷新 按需加载 分屏显示 加速器 拦截器 图片样式定位 延时监控 数据驱动 缓存脱离 JS内存管理

11 手机商城、桃花版客户端功能介绍

12 手机商城、桃花版客户端功能介绍 另外，即将上线的手机客户端3.1.0版本将支持特卖和移动专享价两大特色功能。

13 iPad客户端功能介绍

14 目录 移动端业务 1 旧版本移动端的解决方案 2 新版本移动端的解决方案 3 Crow 5 引擎功能介绍 4

15 采用的开发方式

16 H5引擎支持结构图 Crow 5 引擎的组成部分

17 H5移动商城迭代

18 H5移动商城迭代

19 HTML5引擎 Crow5介绍 主体购物逻辑抽取 完善的基于约定的模块式开发 高效的性能 数十种设计模式的实现 完美实现与原生的内嵌
插件式拼装，灵活，自主 智能自动的实现响应式布局 前端安全过滤器 离线脱机，小伙伴再也不用担心购物没有网络了 模版引擎漂移 日至远程调试 心跳保持 还有很多很多，没有不可能只有想不到

20 Crow5 远程日志调试 服务器 手机接收调试信息 电脑调试 日志转移 手机操作 Console.log(日志信息)
XHR finished loading

21 Crow5 响应式布局 引擎 布 局 管 理 器

22 Crow5 模板引擎漂移 引擎 直接下载 有信号 失去信号 信号恢复 正常访问 m.lefeng.com 无信号时依然可访问域名
因为模板引擎漂移离线了 引擎有心跳保持 复活啦！

23 Crow5 心跳控制 Crow 5 Config requset HTML 数据 驱动器 心跳 心跳 起搏器 服务器 response
不心跳 dao 数据改变信息 Store HTML

24 Crow5 动态数据填充模式 Crow 5 动 态 填 充 预渲染 dao data 数据驱动 局部刷新 动态填充 Page HTML
config Crow 5 静态渲染 配置文件 Module 预渲染

25 Crow5分层图 control service Model DAO

26 模版控制器 server request response HTML

27 核心控制图 插件 Control 引擎 配置

28 数据驱动图 cloud Crow 5 UI HTML iPhone Android iPad winphone TV PC store
定时器 DB cloud JSON cash dao.js 驱动 监听 通知 如果数据改变[引擎]驱动页面改变无需刷新

29 用户点击操作图－数据驱动模式 store 数据驱动 行为调度器 Crow 5 配置文件 规则引擎 用户点击操作 引擎 1 3 2

30 用户操作图 － 区域刷新 配置文件 Crow 5 用户操作 store 页面初始化 页面模块构造 页面渲染完成

31 移动端产品车轮图

32 Thanks!