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

lele1751

第二天：理解APICloud应用执行流程，掌握界面布局相关API使用，了解屏幕适配原理，从0开始搭建整体APP框架，完成所有界面跳转，输出完整的APP静态数据版本。

第二天课程源码下载http://7xy8na.com1.z0.glb.clouddn.com/apicloud/e50c068b5af5499d5a4e3b21d311a0c8.zip

教程更新：Github地址https://github.com/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应用执行流程说明

推荐视频：[APICloud视频之初级代码篇第3讲 APICloud整体介绍http://www.apicloud.com/video_play?list=2&index=1

2. 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应用配置说明http://docs.apicloud.com/Dev-Guide/app-config-manual
推荐视频：APICloud视频之初级代码篇第12讲 APICloud配置文件简介http://www.apicloud.com/video_play?list=2&index=12

4. 引擎的两个重要事件
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设置：

<meta name="viewport"content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

推荐视频（关于viewport配置原理）：APICloud视频之初级代码篇第7讲 APICloud应用结构分析http://www.apicloud.com/video_play?list=2&index=7

6.2 UI尺寸：

一套合适尺寸的UI， **推荐：720x1280**

6.3 量图标准：
优先考虑绝对计量类的单位 px，应先在UI效果图中（如720x1280尺寸图）量出元素的宽或高对应的 px 值，再除以屏幕倍率（如分辨率为720x1280设备的屏幕倍率通常为 2) 得到书写样式时的确切数值。

推荐文档：屏幕适配原理及实现http://docs.apicloud.com/Dev-Guide/screen-adapt-guide

相关技术文档：http://www.apicloud.com/index?uzchannel=33

app开发：http://www.apicloud.com