PhoneGap中文网

 找回密码
 立即注册
查看: 17197|回复: 0

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

[复制链接]

27

主题

33

帖子

181

积分

注册会员

Rank: 2

积分
181
发表于 2017-2-16 15:38:12 | 显示全部楼层 |阅读模式
第二天:理解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 WidgetRoot Window的创建时机
·为什么启动会加载index.html和执行apiready函数
·APICloud屏幕适配的原理,弹性响应式和流式结合的布局方式
·如何搭建APPUI结构

1.
理解APICloud应用执行流程
1.1 APICloud
应用执行流程说明
2.1.png

推荐视频:[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






2.2.png
2.3.png
it营
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-3-29 03:52 , Processed in 0.053901 second(s), 31 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表