Hybrid技术在Flyme的应用实践课件

1、Hybrid技术在Flyme的应用实践Hybrid技术在Flyme的应用实践2011.7-2014.6 腾讯 WebQQ、Q+、手Q、Q群2014.7-2015.10 唯品会 特卖会移动平台前端架构2015.11- 魅族科技，Hybrid App架构设计和落地、前端生态和基础设施建设About me2011.7-2014.6 腾讯 WebQQ、Q+、手Q、Q大纲 Flyme hybrid 原有架构简析 通用Hybrid App开发体系的建设 前端工程、组件生态、工具链通讯资源管理性能优化大纲 Flyme hybrid 原有架构简析 通用HybHybrid Apps on FlymeOSHybr

2、id Apps on FlymeOSFlyme Hybrid 原有架构流程Flyme Hybrid 原有架构流程Flyme hybrid 原有架构Flyme hybrid 原有架构改进思路问题解决方案代码复用模块化、SDK、前端工程接口设计模块化，优雅设计访问url不一致在线和离线均采用唯一urlH5包分发控制包动态更新接口+push通道H5编译、打包、发布自建包管理平台+前端工具改进思路问题解决方案代码复用模块化、SDK、前端工程接口设计通用的Hybrid架构设计理论：https:/chemdemo/chemdemo.github.io/issues/12通用的Hybrid架构设计理论：ht

3、tps:/githubAndroid调用H5通讯基本原理webview.loadUrl(javascript: alert(hello world);Android调用H5：shouldOverrideUrlLoadingOverridepublic boolean shouldOverrideUrlLoading(WebView view, String url) / 自定义的schema if (url.indexOf(myschema:/) != -1) . / other code / 返回true 则表明webview已经“消费”了H5的request事件 return true;

4、/ 返回false，webview将用默认的方式处理H5的request事件 return false;Android调用H5通讯基本原理webview.loa在SDK内部封装桥协议约定H5的调用封装成以下格式：业务层继承SDK，并根据实际需求扩展HandlerJS SDK遵循ES6的模块化写法，并提供完善的二次编译打包工具通讯我们的实现 flyme:/类名/方法?参数.在SDK内部封装桥协议约定通讯我们的实现 flyme:/通讯异步调用通讯异步调用通讯（回调）调用过程通讯（回调）调用过程Hybrid SDKAndroid SDKJS SDKAndroid bridgeHybrid route

5、rAPI HandlerJS bridgeHybrid APIEvent API业务apkH5bridgeMonitor ToolsHybrid SDKAndroid SDKJS SDKAnd模块化的API设计模块化的API设计文档和Q&A支持文档和Q&A支持H5作为数据接收方按键操作硬件状态变更客户端数据变更客户端UI变更未来未知时刻来自客户端的数据变更mback、其他按键网络、位置等歌曲播放状态变更、登陆掉线等H5作为数据接收方按键操作未来未知时刻mback、其他按键网反向通知事件H5 listenkeypressUI status changedata changedevice stat

6、us changeandroid notifyH5 callback/ H5拦截mback按键FlymeJS.on(mback, function mbackHandler(date) (data)/ 客户端notifyWebview.loadUrl(“javascript:FlymeJS.notify(com.meizu.hybrid.event.MBack, JSON.stringify(value: xxx)”)反向通知事件H5 listenkeypressandro相同的资源使用唯一url定位离线文件不存在或过期则走线上基本覆盖所有H5应用场景H5资源访问相同的资源使用唯一url定位H

7、5资源访问H5资源文件打包路径不受约束，根据正则规则将线上url匹配离线文件客户端实现路径重定向、重写等功能资源定位规则routes: regex: /(.+), result: /$1, rule: replace , regex: /h(d+)./(.+), result: /$2, rule: override H5资源文件打包路径不受约束，根据正则规则将线上url匹配离离线访问方案原理优点缺点Web缓存HTTP头纯Web方案，简单伪离线无网不可用manifestHTML5新接口纯Web方案，简单更新有坑离线包请求拦截+本地替换无网可用，资源易于控制需要后台、客户端等资源和人力的配合Ca

8、che APIW3C新草案纯web方案，可实现更细粒度地定制资源更新依赖Service Worker，两者皆不成熟，webview兼容问题几种Web缓存方案对比离线访问方案原理优点缺点Web缓存HTTP头纯Web方案，简托管H5离线包，前端只需要轻量的包管理CI、测试、灰度、发布一体化版本管理、增量对比本地资源包更新检查接口静默更新（服务端主动推送）资源包管理平台设计托管H5离线包，前端只需要轻量的包管理资源包管理平台设计资源包管理平台轻量的H5离线包托管平台资源包管理平台轻量的H5离线包托管平台待发包测试待发包测试离线包分发控制多种灰度方式，更精确地控制离线资源更新范围离线包分发控制多种灰度

9、方式，更精确地控制离线资源更新范围离线包更新流程离线包更新流程上传测试包时同时自动生成增量包更新时同时返回增量和全量包地址增量包在客户端进行hash校验防篡改文件级别的增量diff离线包瘦身增量包上传测试包时同时自动生成增量包离线包瘦身增量包同一个apk内的H5按功能分为多个模块模块之间的更新频率不同生成离线包时只打包改动的模块进行更新在客户端合并多包离线包瘦身拆包同一个apk内的H5按功能分为多个模块离线包瘦身拆包离线包规范离线包规范私有npm仓库cnpm基于React的一系列前端组件遵循ES6模块化标准组件publish约定前端组件生态私有npm仓库cnpm前端组件生态工具前端工具链生成项目模板集成前端开发环境跨平台命令zip、md5、rm等通用数据mock平台重写npm install工具前端工具链生成项目模板集成跨平台命令通用数据重写逐渐完善的工具链逐渐完善的工具链Flyme Hybrid 体系Flyme Hybrid 体系（类）Hybrid开发方案对比方案原理优点缺点适用范围ReactNative/Weexjs书写原生代码运行高性能、跨平台接入门槛高大公司、创业团队Hybrid定制且易扩展