PhoneGap中文网

标题: APP7天快速开发教程2：APP框架搭建、界面布局和屏幕适配下 [打印本页]
作者: lele1751    时间: 2017-2-16 15:41
标题: APP7天快速开发教程2：APP框架搭建、界面布局和屏幕适配下
7. 前端框架
7.1 APICloud前端框架的作用和设计思想
去除浏览器的默认样式和交互行为，简化dom操作，APP一切的显示和行为由自己来定义。推荐视频：[APICloud视频之初级代码篇第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-e ... mework-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.openWin  http://docs.apicloud.com/Client-API/api#33
·api.closeWin  http://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.winName  http://docs.apicloud.com/Client-API/api#a19
·api.winWidth  http://docs.apicloud.com/Client-API/api#a20
·api.winHeight  http://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.frameName  http://docs.apicloud.com/Client-API/api#a9
·api.frameWidth  http://docs.apicloud.com/Client-API/api#a10
·api.frameHeight  http://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.cloudd ... a4e3b21d311a0c8.zip

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







欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/) Powered by Discuz! X3.2