APP7天快速开发教程2APP框架搭建、界面布局和屏幕适配.docx

第二天：理解APICloud应用执行流程，掌握界面布局相关API使用，了解屏幕适配原理，从0开始搭建整体APP框架，完成所有界面跳转，输出完整的APP静态数据版本。第二天课程源码下载http:/7/apicloud/e50c068b5af5499d5a4e3b21d311a0c8.zip教程更新：Github地址/apicloudcom/APICloud-7Days-Online-Training-Tutorials/blob/master/Day2.md学习目标APICloud应用的执行流程，Main Widget和Root Window的创建时机为什么启动会加载index.html和执行apiready函数APICloud屏幕适配的原理，弹性响应式和流式结合的布局方式如何搭建APP的UI结构主要内容1.APICloud应用执行流程1.1 APICloud应用执行流程说明2.引擎初始化后默认创建的两个UI组件实例2.1 主Widget容器（Main Widget）2.2 根窗口（Root Window）3.config配置文件使用3.1 了解config文件作用3.2 掌握config文件使用4.引擎的两个重要事件4.1 content事件4.2 apiready事件5.查看api对象功能5.1 查看api对象功能列表5.2 api对象常用方法使用6.屏幕适配6.1 viewport设置6.2 UI尺寸6.3 量图标准7.前端框架7.1 APICloud前端框架的作用和设计思想7.2 APICloud前端框架使用8.*状态栏处理(#P8)*8.1 沉浸式状态栏效果说明8.2 沉浸式效果实现8.3 修改状态栏样式9.界面布局相关API使用9.1 Widget相关API9.2 Window相关API9.3 Layout相关API9.4 Frame相关API10.搭建APP整体框架，完成APP静态数据版本(#P10)*10.1 每个页面UI结构分析10.2 按照UI架构设计创建对应的UI组件及H5文件10.3 编写每个Window或Frame所对应的H5页面文件10.4 实现Frame之间切换10.5 优化onclick交换响应10.6 实现界面之间跳转10.7 实现页面之间参数传递10.8 监听Android返回键，实现退出APP10.9 阻止iOS滑动返回1. 理解APICloud应用执行流程1.1 APICloud应用执行流程说明推荐视频：APICloud视频之初级代码篇第3讲 APICloud整体介绍/video_play?list=2&index=12. Widget中代码执行之前，由引擎默认创建的两个UI组件实例2.1 主Widget容器（Main Widget）是一个APP所有的UI组件的父容器，由引擎初始化完毕后自动创建，如果关闭了主Widget，那么整个应用也就退出了。2.2 根窗口（Root Window）是Window组件的一个实例，由引擎初始化完毕后自动创建，用于加载content事件所指定的HTML文件(通常为widget根目录下的index.html),Window的name固定为root。3. config文件解析APICloud引擎初始化完成后的第一个操作就是解析config.xml文件3.1 了解config文件作用3.2 掌握config文件使用推荐文档：config.xml应用配置说明/Dev-Guide/app-config-manual推荐视频：APICloud视频之初级代码篇第12讲 APICloud配置文件简介/video_play?list=2&index=124. 引擎的两个重要事件4.1 content事件:此事件是在引擎解析config.xml文件中的Contont标签时产生，是事件队列中的第一个事件。引擎通过处理此事件得到应用（Main Widget）的根窗口（Root Window）需要自动加载的HTML文件。4.2 apiready事件:此事件是在api对象准备完毕后产生，在每个Window或Frame的HTML代码中都需要监听此事件，以确定APICloud扩展对象已经准备完毕，可以调用了。5. api对象api对象是APICloud在全局作用域内唯一的一个扩展对象，api对象下包含了一个APP最常使用的扩展方法和属性，如窗口操作、事件监听、网络请求、设备访问等等。api对象无需引入，可以直接使用。而APICloud的扩展模块，都需要通过api.require方法引入后才能使用。5.1 查看api对象功能5.2 api对象常用方法使用6. 屏幕适配对于Window或Frame所加载的页面，如何编写一套代码完美适配所有屏幕。6.1 viewport设置：推荐视频（关于viewport配置原理）：APICloud视频之初级代码篇第7讲 APICloud应用结构分析/video_play?list=2&index=76.2 UI尺寸：一套合适尺寸的UI，*推荐：720x1280*6.3 量图标准：优先考虑绝对计量类的单位 px，应先在UI效果图中（如720x1280尺寸图）量出元素的宽或高对应的 px 值，再除以屏幕倍率（如分辨率为720x1280设备的屏幕倍率通常为 2) 得到书写样式时的确切数值。推荐文档：屏幕适配原理及实现/Dev-Guide/screen-adapt-guide7. 前端框架7.1 APICloud前端框架的作用和设计思想去除浏览器的默认样式和交互行为，简化dom操作，APP一切的显示和行为由自己来定义。推荐视频：APICloud视频之初级代码篇第8讲 前端框架/video_play?list=2&index=87.2 APICloud前端框架使用推荐文档：前端框架开发指南/Front-end-Framework/framework-dev-guide注意：不建议引用大的JS或CSS框架8. 状态栏处理8.1 沉浸式状态栏效果说明8.2 沉浸式效果实现在config.xml文件配置是否开启:沉浸式效果配置说明/Dev-Guide/app-config-manual#10在Window或Frame的apiready事件后，调用$api.fixStatusBar()方法; /Front-end-Framework/framework-dev-guide#458.3 修改状态栏样式api.setStatusBarStyle /Client-API/api#47推荐视频：APICloud视频之初级代码篇第7讲 APICloud应用结构分析/video_play?list=2&index=79. 界面布局相关API9.1 Widget相关APIapi.openWidget() /Client-API/api#32api.closeWidget() /Client-API/api#149.2 Window相关APIapi.openWin /Client-API/api#33api.closeWin /Client-API/api#15api.closeToWin() /Client-API/api#13api.setWinAttr() /Client-API/api#48api.winName /Client-API/api#a19api.winWidth /Client-API/api#a20api.winHeight /Client-API/api#a189.3 Layout相关APIFrameGroupapi.openFrameGroup() /Client-API/api#28api.closeFrameGroup() /Client-API/api#11api.setFrameGroupIndex() /Client-API/api#43api.setFrameGroupAttr() /Client-API/api#42SlidLayoutapi.openSlidLayout() /Client-API/api#30api.openSlidPane() /Client-API/api#31api.closeSlidPane() /Client-API/api#12DrawerLayoutapi.openDrawerLayout() /Client-API/api#89api.openDrawerPane() /Client-API/api#90api.closeDrawerPane() /Client-API/api#919.4 Frame相关APIapi.openFrame() /Client-API/api#27api.closeFrame() /Client-API/api#10api.setFrameAttr() /Client-API/api#41api.bringFrameToFront() /Client-API/api#6api.sendFrameToBack() /Client-API/api#40api.frameName /Client-API/api#a9api.frameWidth /Client-API/api#a10api.frameHeight /Client-API/api#a810. 搭建APP整体框架，完成APP静态数据版本10.1 页面UI结构分析10.2 按照UI架构设计创建对应UI组件及H5文件根据UI架构设计文档(ui-architecture.xmind)，创建需要的Window或Frame，以及Window或Frame所需加载的H5页面文件10.3 编写Window或Frame所对应的H5页面使用HTML标签构建页面元素:注意要使用语义化标签- header- nav- section- footer使用CSS为页面元素添加样式:常用元素样式定义常用规范- display- position- width- height- box-sizing使用弹性盒子布局(flexbox):注意考虑浏览器兼容性- display: -webkit-box- display: -webkit-flex- display: flex- -webkit-box-orient: vertical- -webkit-flex-flow: column- flex-flow: column- -webkit-blox-orient: horizontal- -webkit-flex-flow: row- flex-flow: row- -webkit-box-flex: 1- -webkit-flex: 1- flex: 110.4 实现Frame之间切换手势滑动切换点击菜单切换10.5 优化点击交互响应消除webkit内核默认的onclick事件的300ms响应延迟tapmode属性api.parseTapmode方法 /Cli