1.了解APICloud平台

APICloud应用开发模式： 标准的HTML/CSS/JS + APICloud扩展API

APICloud扩展API调用方式：

核心模块在 window.api 对象下，不需要单独引用，可以直接调用  api.methodName(param, callback);

扩展模块需要 require 引入，遵守 CommonJS 规范

var module = api.require('moduleName'); module.methodName(param, callback); param: {} //参数，是一个JSON对象 callback: function(ret, err){} //回调函数，是一个Function对象，方法调用的结果通过此函数返回

 

2.UI架构设计

2.1 APICloud应用的UI组成结构

2.2 APICloud界面布局5大组件

Widget: Widget是APICloud应用运行管理的最小单位

Widget在UI上表现为一个独立的窗口容器，内部可以包含Layout、Window或UIModule，并且同一时刻，应用中只能有一个Widget在界面上显示。

• 打开Widget: api.openWidget()
• 关闭Widget: api.closeWidget()

Layout: Layout实现了某一种特定的布局效果，通过定义好的布局来组织一组Window或Frame来完成整体的界面布局效果，每一个Layout内部可以包含Window和Frame

• 打开FrameGroup: api.openFrameGroup()
• 关闭FrameGroup: api.closeFrameGroup()

Window: Window是一个独立的Native窗口（Android或iOS），是APICloud应用界面布局的基本组件，每一个APP都是由多个Window组成。Window所承载的内容其所加载的HTML页面决定。每一个Window都是独立的Web容器，有自己独立的Dom树结构，并且独立进行渲染。Window的起点位于屏幕左上角，宽高占满屏幕，不可修改。Window内部可以包含Layout、Frame和UIModule。

• 打开Window: api.openWin()
• 关闭Window: api.closeWin()

Frame: Frame是一个独立的Native视图（Android或iOS），视图所承载的内容其所加载的HTML页面决定。每一个Frame都是独立的Web容器，有自己独立的Dom树结构，并且独立进行渲染。Frame的位置和宽高可通过参数配置。Frame通常作为一个子视图，嵌入到Window或Layout中，Frame内部可以包含UIModule。

• 打开Frame: api.openFrame()
• 关闭Frame: api.closeFrame()

UIModule: UI模块是由一组Native的视图组成，来实现某种特定的UI界面效果，可以是全屏展示也可以只填充指定的区域。每一个UI模块都具有自己独立的生命周期、界面布局、事件管理和数据交换。UI模块通常需要嵌入到Window或Frame中使用。

• 加载UIModule: api.require()
• 打开UIModule(以UIScrollPicture为例)(: UIScrollPicture.open()
• 关闭UIModule(以UIScrollPicture为例)(: UIScrollPicture.close()

页面UI结构分析

• 

3. APICloud应用执行流程说明

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方法引入后才能使用。

6. 屏幕适配

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" />

 

6.2 UI尺寸：

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

6.3 量图标准：

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

7.APICloud数据通信相关API

7.1 HTTP请求

• 发送请求：api.ajax()
• 取消请求：api.cancelAjax()

7.2 文件下载

• 开始下载：api.download()
• 取消下载：api.cancelDownload()

8. api.ajax的使用

--

• 超时：timeout
• 方法：method（get、post、put、delete、head）
• 提交数据：data(stream、body、values files)
• 返回数据类型：dataType（json、text）
• 缓存设置：cache（支持get请求）
• 请求头：headers
• 进度上报：report
• 返回完整response信息：returnAll（ret.headers、ret.body，ret.statusCode）
• 客户端证书设置：certificate

9. 接口联调

HTTP + JSON是最常用的前后端数据通信方式

10. 常用对话框窗口使用

10.1 提示对话框

• api.alert()
• api.confirm()
• api.prompt()
• api.toast()

10.2 状态对话框

• api.showProgress()
• api.hideProgress()

10.3 选择对话框

• api.actionSheet()
• api.datePicker()
•  

11 平台事件类型

事件名称全部小写

1 设备

• 电池电量：batterylow、batterystatus
• 物理按键：keyback、keymenu
• 音量按键：volumeup、volumedown

2 网络

• 网络状态：online、offline
• 云服务状态：smartupdatefinish

3 交互

• 手势：swipeup、swipedown、swipeleft、swiperight
• 滚动：scrolltobottom
• 点击：tap
• 长按：longpress
• 状态栏：noticeclicked
• 启动页：launchviewclicked

4 窗口

• 窗口显示：viewappear
• 窗口隐藏：viewdisappear

5 应用

• 回到前台：resume
• 进入后台：pause
• 被其他应用调用：appindent

6 自定义

12 事件监听机制

• 添加监听：api.addEventListener()
• 删除监听：api.removeEventListener()
• 发送事件：api.sentEvent()