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相关API????9.2 Window相关API????9.3 Layout相关API????9.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返回键，实现退出APP????10.9 阻止iOS滑动返回1. 理解APICloud应用执行流程1.1 APICloud应用执行流程说明推荐视频：[APICloud视频之初级代码篇第3讲 APICloud整体介绍/video_play?list=2index=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=2index=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对象无需引入，可以直接使