APP7天快速开发教程2：APP框架搭建、界面布局和屏幕适配下
7. 前端框架7.1 APICloud前端框架的作用和设计思想
去除浏览器的默认样式和交互行为，简化dom操作，APP一切的显示和行为由自己来定义。推荐视频：视频之初级代码篇第8讲前端框架http://www.apicloud.com/video_play?list=2&index=8
7.2 APICloud前端框架使用推荐文档：前端框架开发指南http://docs.apicloud.com/Front-end-Framework/framework-dev-guide注意：不建议引用大的JS或CSS框架
8. 状态栏处理
8.1 沉浸式状态栏效果说明
8.2 沉浸式效果实现
·在config.xml文件配置是否开启:
<preference name="statusBarAppearance"value="true" />沉浸式效果配置说明http://docs.apicloud.com/Dev-Guide/app-config-manual#10
·在Window或Frame的apiready事件后，调用$api.fixStatusBar()方法; http://docs.apicloud.com/Front-end-Framework/framework-dev-guide#45
8.3 修改状态栏样式
api.setStatusBarStyle http://docs.apicloud.com/Client-API/api#47推荐视频：APICloud视频之初级代码篇第7讲 APICloud应用结构分析http://www.apicloud.com/video_play?list=2&index=7
9. 界面布局相关API
9.1 Widget相关API
·api.openWidget()http://docs.apicloud.com/Client-API/api#32
·api.closeWidget()http://docs.apicloud.com/Client-API/api#14
9.2 Window相关API
·api.openWinhttp://docs.apicloud.com/Client-API/api#33
·api.closeWinhttp://docs.apicloud.com/Client-API/api#15
·api.closeToWin()http://docs.apicloud.com/Client-API/api#13
·api.setWinAttr()http://docs.apicloud.com/Client-API/api#48
·api.winNamehttp://docs.apicloud.com/Client-API/api#a19
·api.winWidthhttp://docs.apicloud.com/Client-API/api#a20
·api.winHeighthttp://docs.apicloud.com/Client-API/api#a18
9.3 Layout相关API
FrameGroup
·api.openFrameGroup()http://docs.apicloud.com/Client-API/api#28
·api.closeFrameGroup()http://docs.apicloud.com/Client-API/api#11
·api.setFrameGroupIndex()http://docs.apicloud.com/Client-API/api#43
·api.setFrameGroupAttr()http://docs.apicloud.com/Client-API/api#42
SlidLayout
·api.openSlidLayout()http://docs.apicloud.com/Client-API/api#30
·api.openSlidPane()http://docs.apicloud.com/Client-API/api#31
·api.closeSlidPane()http://docs.apicloud.com/Client-API/api#12
DrawerLayout
·api.openDrawerLayout()http://docs.apicloud.com/Client-API/api#89
·api.openDrawerPane()http://docs.apicloud.com/Client-API/api#90
·api.closeDrawerPane()http://docs.apicloud.com/Client-API/api#91
9.4 Frame相关API
·api.openFrame()http://docs.apicloud.com/Client-API/api#27
·api.closeFrame()http://docs.apicloud.com/Client-API/api#10
·api.setFrameAttr()http://docs.apicloud.com/Client-API/api#41
·api.bringFrameToFront()http://docs.apicloud.com/Client-API/api#6
·api.sendFrameToBack()http://docs.apicloud.com/Client-API/api#40
·api.frameNamehttp://docs.apicloud.com/Client-API/api#a9
·api.frameWidthhttp://docs.apicloud.com/Client-API/api#a10
·api.frameHeighthttp://docs.apicloud.com/Client-API/api#a8
10. 搭建APP整体框架，完成APP静态数据版本
10.1 页面UI结构分析
10.2 按照UI架构设计创建对应UI组件及H5文件根据UI架构设计文档(ui-architecture.xmind)，创建需要的Window或Frame，以及Window或Frame所需加载的H5页面文件
10.3 编写Window或Frame所对应的H5页面
·使用HTML标签构建页面元素: 注意要使用语义化标签
- header
- nav
- section
- footer
·使用CSS为页面元素添加样式: 常用元素样式定义常用规范
- display
- position
- width
- height
- box-sizing
·使用弹性盒子布局(flexbox): 注意考虑浏览器兼容性
- display: -webkit-box
- display: -webkit-flex
- display: flex
- -webkit-box-orient: vertical
- -webkit-flex-flow: column
- flex-flow: column
- -webkit-blox-orient: horizontal
- -webkit-flex-flow: row
- flex-flow: row
- -webkit-box-flex: 1
- -webkit-flex: 1
- flex: 1
10.4 实现Frame之间切换
·手势滑动切换
·点击菜单切换
10.5 优化点击交互响应消除webkit内核默认的onclick事件的300ms响应延迟
·tapmode属性
·api.parseTapmode方法http://docs.apicloud.com/Client-API/api#34
10.6 实现界面之间跳转按照产品原型实现各UI界面之前的切换
10.7 实现页面之间的参数传递
·参数pageParam
·api.pageParam http://docs.apicloud.com/Client-API/api#a12
10.8 监听Android返回键，实现退出APP
·监听keyback事件
10.9 阻止iOS滑动返回
·设置slidBackEnabled参数
第二天课程源码下载http://7xy8na.com1.z0.glb.clouddn.com/apicloud/e50c068b5af5499d5a4e3b21d311a0c8.zip
相关技术文档：http://www.apicloud.com/index?uzchannel=33app开发：http://www.apicloud.com
页:
[1]