2018年快应用开发与实现指南.pdf

《2018年快应用开发与实现指南.pdf》由会员分享，可在线阅读，更多相关《2018年快应用开发与实现指南.pdf（31页珍藏版）》请在三个皮匠报告上搜索。

1、快应用开发体验与架构概述背景介绍开发体验架构概述 背景介绍：快应用（视频展示）背景介绍：快应用目标重视体验即点即用 背景介绍：浪潮之巅基于ROM联盟共建统一标准 背景介绍：多场景融入(视频展示)浏览器入口全局搜索入口应用商店入口 背景介绍：技术如何做到？无需安装性能差功能缺失升级容易下载安装性能好功能完整版本问题移动网页原生应用秒开性能好功能完整容易管理 开发体验：接入成本很大？开发体验：示例项目(Github地址+效果展示)代码：200行以内仓库：quickappcn/todos 开发体验：与H5开发对比快应用：脚手架生成项目1.静态页面2.页面样式3.系统能力6.生命周期5.事件响应4.模

2、板渲染7.组件化8.引入动画H5开发：脚手架生成项目1.静态页面2.页面样式4.渲染模板3.HTTP请求5.自测无误6.联调测试 开发体验：项目脚手架hap init 根据项目模板生成npm run build构建项目：rpk文件npm run server手机扫码下载初始化项目环境准备NodeJS v6.0 以上全局安装npm install hap-toolkit g 开发体验：静态页面（文件后缀为ux）标签 样式 脚本 开发体验：调整样式flex布局flex-direction，align-itemsCSS属性子width，color多种选择器简单选择，后代选择 开发体验：系统能力引入接

3、口import prompt from system.prompt调用方法prompt.showToast()其它能力fetch，media，pay，account，etc.开发体验：模板渲染指令for，if，show占位block，slot 开发体验：事件响应定义ViewModel：模块定义export ViewModel对象数据模型public/protected/private组件事件click，appear，focus 开发体验：生命周期页面创建onReady：其中数据，DOM加载完成页面可见性onShow/onHide：显示/隐藏时触发页面销毁onDestroy：销毁，释放资源按键响

4、应onBackPress：实体/虚拟按键返回 开发体验：组件化引入组件使用组件 开发体验：原生组件性能优势利用组件原生view的能力（如：复用）更好体验切换动画，手势支持UI组件库tabs，swiper，web，etc.开发体验：引入动画定义动画keyframes使用变形translate，scale，rotate使用伪类:disabled，:focus 开发体验：调试开发（视频展示）Elements查看DOM结构Style查看并修改节点样式Source调试Javascript代码Console输出日志，数据结构 开发体验：总结MVVM编程模式前端概念组件化思维 架构概述：如何支撑？架构概述：

5、整体思路ux页面js页面页面UI体积：几百K多页面-项目rpk压缩文件应用html+style+scriptjson+json+jsDOM树编译时运行时 架构概述：编译时hap-toolkit 工具脚手架模板化命令数据模型解析转换合法性校验其它编译器调试器服务器手机运行平台devtoolsux页面文件其它类型文件 架构概述：运行时框架输出 架构概述：JS层架构应用管理应用与页面生命周期DOM模型样式计算基础能力组件系统能力第三方服务回调机制MVVM组件化标签数据驱动diff实现JS Bridge&Binding 架构概述：DOM模型源代码?运行时 架构概述：样式计算引擎编译样式计算各类规则的优先级优化：1.选择器规则分类；2.缓存元素子节点匹配规则；3.懒合并计算；元素更新触发部分样式的重新计算合并计算序列化时触发，减少重复计算 架构概述：页面渲染1.创建页面2.建立DOM模型3.节点转换、布局4.绘制渲染JS层2.建立DOM模型JS线程doc创建数据驱动模板编译DOM序列化Native层1.创建页面Native层3.节点转换、布局Android OS层4.绘制渲染UI线程路由定位页面栈管理解析转换布局实现绘制View渲染页面 架构概述：总结DOM模型数据驱动应用管理