书签 分享 收藏 举报 版权申诉 / 33
上传文档赚钱

类型Hybrid技术在Flyme的应用实践课件.pptx

  • 上传人(卖家):晟晟文业
  • 文档编号:4091869
  • 上传时间:2022-11-10
  • 格式:PPTX
  • 页数:33
  • 大小:3.03MB
  • 【下载声明】
    1. 本站全部试题类文档,若标题没写含答案,则无答案;标题注明含答案的文档,主观题也可能无答案。请谨慎下单,一旦售出,不予退换。
    2. 本站全部PPT文档均不含视频和音频,PPT中出现的音频或视频标识(或文字)仅表示流程,实际无音频或视频文件。请谨慎下单,一旦售出,不予退换。
    3. 本页资料《Hybrid技术在Flyme的应用实践课件.pptx》由用户(晟晟文业)主动上传,其收益全归该用户。163文库仅提供信息存储空间,仅对该用户上传内容的表现方式做保护处理,对上传内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知163文库(点击联系客服),我们立即给予删除!
    4. 请根据预览情况,自愿下载本文。本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
    5. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007及以上版本和PDF阅读器,压缩文件请下载最新的WinRAR软件解压。
    配套讲稿:

    如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

    特殊限制:

    部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。

    关 键  词:
    Hybrid 技术 Flyme 应用 实践 课件
    资源描述:

    1、Hybrid技术在Flyme的应用实践 2011.7-2014.6 腾讯 WebQQ、Q+、手Q、Q群 2014.7-2015.10 唯品会 特卖会移动平台前端架构 2015.11-魅族科技,Hybrid App架构设计和落地、前端生态和基础设施建设About me大纲1.Flyme hybrid 原有架构简析2.通用Hybrid App开发体系的建设3.前端工程、组件生态、工具链 通讯 资源管理 性能优化Hybrid Apps on FlymeOSFlyme Hybrid 原有架构流程Flyme hybrid 原有架构改进思路问题解决方案代码复用模块化、SDK、前端工程接口设计模块化,优雅设

    2、计访问url不一致在线和离线均采用唯一urlH5包分发控制包动态更新接口+push通道H5编译、打包、发布自建包管理平台+前端工具通用的Hybrid架构设计理论:https:/ Android调用H5通讯基本原理webview.loadUrl(javascript:alert(hello world);Android调用H5:shouldOverrideUrlLoadingOverridepublic boolean shouldOverrideUrlLoading(WebView view,String url)/自定义的schema if(url.indexOf(myschema:/)!=

    3、-1)./other code /返回true 则表明webview已经“消费”了H5的request事件 return true;/返回false,webview将用默认的方式处理H5的request事件 return false;在SDK内部封装桥协议约定 H5的调用封装成以下格式:业务层继承SDK,并根据实际需求扩展Handler JS SDK遵循ES6的模块化写法,并提供完善的二次编译打包工具通讯我们的实现 flyme:/类名/方法?参数.通讯异步调用通讯(回调)调用过程Hybrid SDKAndroid SDKJS SDKAndroid bridgeHybrid routerAPI

    4、HandlerJS bridgeHybrid APIEvent API业务apkH5bridgeMonitor Tools模块化的API设计文档和Q&A支持H5作为数据接收方l按键操作l硬件状态变更l客户端数据变更l客户端UI变更未来未知时刻来自客户端的数据变更mback、其他按键网络、位置等歌曲播放状态变更、登陆掉线等反向通知事件H5 listen keypress UI status change data change device status changeandroid notifyH5 callback/H5拦截mback按键FlymeJS.on(mback,function mb

    5、ackHandler(date)console.info(data)/客户端notifyWebview.loadUrl(“javascript:FlymeJS.notify(com.meizu.hybrid.event.MBack,JSON.stringify(value:xxx)”)相同的资源使用唯一url定位 离线文件不存在或过期则走线上 基本覆盖所有H5应用场景H5资源访问 H5资源文件打包路径不受约束,根据正则规则将线上url匹配离线文件 客户端实现路径重定向、重写等功能资源定位规则routes:regex:/ ,regex:/h(d+) 离线访问方案原理优点缺点Web缓存HTTP头纯

    6、Web方案,简单伪离线无网不可用manifestHTML5新接口纯Web方案,简单更新有坑离线包请求拦截+本地替换无网可用,资源易于控制需要后台、客户端等资源和人力的配合Cache APIW3C新草案纯web方案,可实现更细粒度地定制资源更新依赖Service Worker,两者皆不成熟,webview兼容问题几种Web缓存方案对比 托管H5离线包,前端只需要轻量的包管理 CI、测试、灰度、发布一体化 版本管理、增量对比 本地资源包更新检查接口 静默更新(服务端主动推送)资源包管理平台设计资源包管理平台轻量的H5离线包托管平台待发包测试离线包分发控制多种灰度方式,更精确地控制离线资源更新范围离

    7、线包更新流程 上传测试包时同时自动生成增量包 更新时同时返回增量和全量包地址 增量包在客户端进行hash校验防篡改 文件级别的增量diff离线包瘦身增量包 同一个apk内的H5按功能分为多个模块 模块之间的更新频率不同 生成离线包时只打包改动的模块进行更新 在客户端合并多包离线包瘦身拆包离线包规范 私有npm仓库cnpm 基于React的一系列前端组件 遵循ES6模块化标准 组件publish约定前端组件生态工具前端工具链生成项目模板集成前端开发环境跨平台命令zip、md5、rm等通用数据mock平台重写npm install逐渐完善的工具链Flyme Hybrid 体系(类)Hybrid开发方案对比方案原理优点缺点适用范围ReactNative/Weexjs书写原生代码运行高性能、跨平台接入门槛高大公司、创业团队Hybrid定制且易扩展的webview方案通用、稳定、技术细节容易把控技术实现不通用开发成本高性能不够好大中型团队Ionic/Cordova高度定制的webview丰富的api和完善的工具、插件,纯web方案高度定制导致扩展性差,性能差,依赖官方后台实现热更个人开发者

    展开阅读全文
    提示  163文库所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    关于本文
    本文标题:Hybrid技术在Flyme的应用实践课件.pptx
    链接地址:https://www.163wenku.com/p-4091869.html

    Copyright@ 2017-2037 Www.163WenKu.Com  网站版权所有  |  资源地图   
    IPC备案号:蜀ICP备2021032737号  | 川公网安备 51099002000191号


    侵权投诉QQ:3464097650  资料上传QQ:3464097650
       


    【声明】本站为“文档C2C交易模式”,即用户上传的文档直接卖给(下载)用户,本站只是网络空间服务平台,本站所有原创文档下载所得归上传人所有,如您发现上传作品侵犯了您的版权,请立刻联系我们并提供证据,我们将在3个工作日内予以改正。

    163文库