《Hybrid技术在Flyme的应用实践课件.pptx》由会员分享，可在线阅读，更多相关《Hybrid技术在Flyme的应用实践课件.pptx（33页珍藏版）》请在三一办公上搜索。
1、Hybrid技术在Flyme的应用实践,Hybrid技术在Flyme的应用实践,2011.7-2014.6 腾讯 WebQQ、Q+、手Q、Q群2014.7-2015.10 唯品会 特卖会移动平台前端架构2015.11- 魅族科技，Hybrid App架构设计和落地、前端生态和基础设施建设,About me,2011.7-2014.6 腾讯 WebQQ、Q+、手Q、Q,大纲,Flyme hybrid 原有架构简析,通用Hybrid App开发体系的建设,前端工程、组件生态、工具链,通讯资源管理性能优化,大纲 Flyme hybrid 原有架构简析 通用Hyb,Hybrid Apps on Fly
2、meOS,Hybrid Apps on FlymeOS,Flyme Hybrid 原有架构流程,Flyme Hybrid 原有架构流程,Flyme hybrid 原有架构,Flyme hybrid 原有架构,改进思路,改进思路问题解决方案代码复用模块化、SDK、前端工程接口设计,通用的Hybrid架构,设计理论：https:/,通用的Hybrid架构设计理论：https:/github,Android调用H5,通讯基本原理,webview.loadUrl(javascript: alert(hello world);,Android调用H5：shouldOverrideUrlLoading,O
3、verridepublic boolean shouldOverrideUrlLoading(WebView view, String url) / 自定义的schema if (url.indexOf(myschema:/) != -1) . / other code / 返回true 则表明webview已经“消费”了H5的request事件 return true; / 返回false，webview将用默认的方式处理H5的request事件 return false;,Android调用H5通讯基本原理webview.loa,在SDK内部封装桥协议约定H5的调用封装成以下格式：业务层继
4、承SDK，并根据实际需求扩展HandlerJS SDK遵循ES6的模块化写法，并提供完善的二次编译打包工具,通讯我们的实现,flyme:/类名/方法?参数.,在SDK内部封装桥协议约定通讯我们的实现 flyme:/,通讯异步调用,通讯异步调用,通讯（回调）调用过程,通讯（回调）调用过程,Hybrid SDK,Android SDK,JS SDK,Android bridge,Hybrid router,API Handler,JS bridge,Hybrid API,Event API,业务,apk,H5,bridge,Monitor Tools,Hybrid SDKAndroid SDKJS
5、 SDKAnd,模块化的API设计,模块化的API设计,文档和Q&A支持,文档和Q&A支持,H5作为数据接收方,按键操作硬件状态变更客户端数据变更客户端UI变更,未来未知时刻来自客户端的数据变更,mback、其他按键,网络、位置等,歌曲播放状态变更、登陆掉线等,H5作为数据接收方按键操作未来未知时刻mback、其他按键网,反向通知事件,H5 listen,keypressUI status changedata changedevice status change,android notify,H5 callback,/ H5拦截mback按键FlymeJS.on(mback, functio
6、n mbackHandler(date) console.info(data)/ 客户端notifyWebview.loadUrl(“javascript:FlymeJS.notify(com.meizu.hybrid.event.MBack, JSON.stringify(value: xxx)”),反向通知事件H5 listenkeypressandro,相同的资源使用唯一url定位离线文件不存在或过期则走线上基本覆盖所有H5应用场景,H5资源访问,相同的资源使用唯一url定位H5资源访问,H5资源文件打包路径不受约束，根据正则规则将线上url匹配离线文件客户端实现路径重定向、重写等功能,
7、资源定位规则,routes: regex: / result: / rule: replace , regex: /h(d+) result: / rule: override ,H5资源文件打包路径不受约束，根据正则规则将线上url匹配离,离线访问,几种Web缓存方案对比,离线访问方案原理优点缺点Web缓存HTTP头纯Web方案，简,托管H5离线包，前端只需要轻量的包管理CI、测试、灰度、发布一体化版本管理、增量对比本地资源包更新检查接口静默更新（服务端主动推送）,资源包管理平台设计,托管H5离线包，前端只需要轻量的包管理资源包管理平台设计,资源包管理平台,轻量的H5离线包托管平台,资源包管
8、理平台轻量的H5离线包托管平台,待发包测试,待发包测试,离线包分发控制,多种灰度方式，更精确地控制离线资源更新范围,离线包分发控制多种灰度方式，更精确地控制离线资源更新范围,离线包更新流程,离线包更新流程,上传测试包时同时自动生成增量包更新时同时返回增量和全量包地址增量包在客户端进行hash校验防篡改文件级别的增量diff,离线包瘦身增量包,上传测试包时同时自动生成增量包离线包瘦身增量包,同一个apk内的H5按功能分为多个模块模块之间的更新频率不同生成离线包时只打包改动的模块进行更新在客户端合并多包,离线包瘦身拆包,同一个apk内的H5按功能分为多个模块离线包瘦身拆包,离线包规范,离线包规范,私有npm仓库cnpm基于React的一系列前端组件遵循ES6模块化标准组件publish约定,前端组件生态,私有npm仓库cnpm前端组件生态,工具,前端工具链,生成项目模板,集成前端开发环境,跨平台命令zip、md5、rm等,通用数据mock平台,重写npm install,工具前端工具链生成项目模板集成跨平台命令通用数据重写,逐渐完善的工具链,逐渐完善的工具链,Flyme Hybrid 体系,Flyme Hybrid 体系,（类）Hybrid开发方案对比,（类）Hybrid开发方案对比方案原理优点缺点适用范围Rea,
