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在界面上显示。

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

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

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

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

页面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请求

7.2 文件下载

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 提示对话框

10.2 状态对话框

10.3 选择对话框

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 事件监听机制

äºç«¯ä¸ä½æ¶æ

 

 

 

 

 

 

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐