apicloud教程2 （转载）

本帖最后由 中山赢友网络科技有限公司 于 2015-10-17 15:38 编辑

继《APICloud之小白图解教程系列（一）：认识APICloud》之后的第二篇教程。

本篇教程有以下知识点：

1、APICloud Studio的介绍和常用快捷键的使用
2、认识APP中的”流“布局，也就是CSS3的Flex布局

3、优化官方的fixStatusBar方法，实现兼容性状态栏处理！

工欲善其事，必先利其器：APICloud Studio的使用介绍及常用快捷键使用

APICloud Studio是官方推荐IDE编辑器，也就是我们开发APP的软件工具，内置了调试，编译，文档，提示，实时预览等功能，可以帮助我们快速的开发APP。该软件的使用也不用多说，现在给大家介绍一下APICloud Studio一些常用的快捷键，可以帮助大家快速开发。首先我下载的是2015年10月16号最新的包，版本为：APICloud_SDK_v1.1.41。APICloud Studio的版本为：APICloud-Studio_1.2.2。

常用快捷键有：

Ctrl+Z：撤销
Ctrl+N：创建项目或文件
Ctrl+Shift+F：代码格式化（这个经常用，可以美化代码，也可以通过这个检查代码是否出错）
Ctrl+/ ：注释和反注释
Alt+/：强制代码提示
Ctrl+D：剪切该行
Ctrl+R：真机运行（常用）
Ctrl+W：编译自定义Loader（常用）
Ctrl+Y：反撤销
Ctrl+L：跳到改行（注意，如果需要在IDE中显示行号，只需要在代码区域的最左边右键显示行号就可以了）
Ctrl+S：保存
Ctrl+F：搜索
Ctrl+H：搜索替换
Ctrl+M：最大化或最小化当前焦点区域，比如像最大化代码区域或者工程目录区域，只需要在该区域空白地方点一下，就可以通过它最大化最小化了。  
Ctrl+C：复制  
Ctrl+V：黏贴  
Ctrl+E：快速切换已经的标签（常用）
Shift+Enter：在当前光标下面新增一行，无需把光标放在最后面Enter，（这个非常常用，极大提高编程速度）
Ctrl+Shift+Enter：在当前光标上面添加新增一行（这个非常常用，极大提高编程速度） 
Ctrl+Shift+E：切换当前文件，（非常常用，可以快速从一个页面切换到另一个页面编辑器）
Ctrl+Shift+R：全局搜索所有文件并快速打开（这个很牛逼，可以全局搜索项目中有哪些文件，然后直接打开，非常实用，这样找文件就非常容易了！）
Ctrl+Shift+W：关闭所有页面
Ctrl+Shift+L：显示所有快捷键的操作，再也不怕忘记快捷键了

流布局：目前非常火的前端开发布局方式

移动开发布局最火的就是Flexbox流布局，也叫伸缩布局。详细教程可以看：http://www.w3cplus.com/css3/css3-flexbox-layout.html
好了，现在我们就用流行的流布局构建我们的APP最基本的页面了

1、新建APICloud项目：目前我们就新建一个APICloud的项目，模板选空白应用（我们要从基本的布局开始学习）：如图所示：

<ignore_js_op>

2、更新并提交代码（养成这个习惯），如图所示

<ignore_js_op>

3、删除默认的代码，保留干净的编辑环境，保留css，和js文件！如图所示：
<ignore_js_op>

4、实现简单的APP页面三栏布局，如图所示：
<ignore_js_op>

大家观察上面图片，可以清楚看出三块结构，那我们应该创建一个父容器包裹着三个div（头，中间，底）（推荐使用div+css布局哦，table就不推荐了！）表示，如：

1. <div id="web-view">
2. <div id="header">
3. 我是头部
4. </div>
5. <div id="main"></div>
6. <div id="footer"></div>
7. </div>

复制代码

2、添加CSS样式，将id为main的区域变为自动伸缩布局，头和尾部固定，样式如下：

1. <style type="text/css">
2. /*必须设置这个属性*/
3. html, body {
4. height: 100%;
5. }
6. #web-view {
7. display: -webkit-box;
8. display: -webkit-flex;
9. display: flex;
10. /* 下面三个控制子div的显示方式，是垂直显示 */
11. -webkit-box-orient: vertical;
12. -webkit-flex-flow: column;
13. flex-flow: column;
14. /* 上面三个控制子div的显示方式，是垂直显示 */
15. height: 100%;
16. /*===== 如果想让div水平排布，可以使用下面代码 ====*/
17. /*-webkit-box-orient: horizontal;
18. -webkit-flex-flow: row;
19. flex-flow: row;
20. width: 100%;*/
21. }
22. #header {
23. height: 44px;/*固定头部 */
24. background: #f00;
25. text-align: center;
26. line-height: 44px;
27. color: #fff;
28. }
29. #footer {
30. height: 50px;/*固定尾部*/
31. background: #00f;
32. }
33. #main {
34. /*设置main为伸缩布局*/
35. -webkit-box-flex: 1;
36. -webkit-flex: 1;
37. flex: 1;
38. background: #00f;
39. }
40. </style>

复制代码

图片如下： <ignore_js_op>

好了，简单的三栏布局以及完毕。

5、在Index页面创建Frame，也就是在Main区域打开。在打开之前先说明一些注意的东西，我相信很多朋友在学习的时候都碰到过IOS或Android状态栏遮住问题，或者想实现状态栏沉浸式效果，那你需要做下面几件事情：

1）、在根目录下面的config.xml配置文件中添加以下代码：

1. <preference name="statusBarAppearance" value="true"/>
2. <preference name="iOS7StatusBarAppearance" value="true"/>
3. <preference name="softInputMode" value="resize"/>

复制代码

2）优化官方的fixStatusBar代码，通过这个代码就可以兼容以前版本和未来版本状态栏问题！包括IOS和Android版本！

1. // 解决状态栏重合，并优化fixStatusBar代码,Android4.4版本以上添加25px
2. function fixStatusBar(headerid, callback) {
3. var header = $api.byId(headerid);
4. var systemType = api.systemType;
5. var systemVersion = parseFloat(api.systemVersion);
6. if (systemType == "ios" || (systemType == "android" && systemVersion >= 4.4)) {
7. if (systemType == "android") {
8. header.style.paddingTop = '25px';
9. }
10. $api.fixStatusBar(header);
11. } else {
12. $api.fixIos7Bar(header);
13. }
14. var headerPos = $api.offset(header);
15. if ( typeof callback == "function") {
16. callback(headerPos);
17. }
18. }

复制代码

3）创建并打开main框架，也就是页面的主体

1. apiready = function() {
2. // 获取底部的高度
3. var footer = $api.byId("footer");
4. var footerPos = $api.offset(footer);
5. fixStatusBar("header", function(headerPos) {
6. api.openFrame({
7. name : 'main',
8. url : './html/main.html',
9. rect : {
10. x : 0,
11. y : headerPos.h,
12. w : api.winWidth,
13. h : api.winHeight - headerPos.h - footerPos.h // footerPos.h是底部的高度,也可以直接获取main的高度
14. },
15. pageParam : {
16. },
17. bounces : true,
18. bgColor : 'rgba(0,0,0,0)',
19. vScrollBarEnabled : false,
20. hScrollBarEnabled : false
21. });
22. });
23. };

复制代码

6、直接使用快捷的Ctrl+R真机运行就可以看到效果了。如果想看沉浸式的效果，可以云编译或者编译自定义Loader使用（快捷键为Ctrl+W）,新版本直接真机调试也可以看到了。，如下图：

<ignore_js_op>

好了简单的布局页面完成。
首页index.html所有的代码：

1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
7. <title>小白之路</title>
8. <link rel="stylesheet" type="text/css" href="./css/api.css" />
9. <style type="text/css">
10. /*必须设置这个属性*/
11. html, body {
12. height: 100%;
13. }
14. #web-view {
15. display: -webkit-box;
16. display: -webkit-flex;
17. display: flex;
18. /* 下面三个控制子div的显示方式，是垂直显示 */
19. -webkit-box-orient: vertical;
20. -webkit-flex-flow: column;
21. flex-flow: column;
22. /* 上面三个控制子div的显示方式，是垂直显示 */
23. height: 100%;
24. /*===== 如果想让div水平排布，可以使用下面代码 ====*/
25. /*-webkit-box-orient: horizontal;
26. -webkit-flex-flow: row;
27. flex-flow: row;
28. width: 100%;*/
29. }
30. #header {
31. height: 44px;/*固定头部 */
32. background: #f00;
33. text-align: center;
34. line-height: 44px;
35. color: #fff;
36. }
37. #footer {
38. height: 50px;/*固定尾部*/
39. background: #00f;
40. }
41. #main {
42. /*设置main为伸缩布局*/
43. -webkit-box-flex: 1;
44. -webkit-flex: 1;
45. flex: 1;
46. background: #0f0;
47. }
48. </style>
49. </head>
50. <body>
51. <div id="web-view">
52. <div id="header">
53. 我是头部
54. </div>
55. <div id="main"></div>
56. <div id="footer"></div>
57. </div>
58. </body>
59. <script type="text/javascript" src="./script/api.js"></script>
60. <script type="text/javascript">
61. // 解决状态栏重合，并优化fixStatusBar代码,Android4.4版本以上添加25px
62. function fixStatusBar(headerid, callback) {
63. var header = $api.byId(headerid);
64. var systemType = api.systemType;
65. var systemVersion = parseFloat(api.systemVersion);
66. if (systemType == "ios" || (systemType == "android" && systemVersion >= 4.4)) {
67. if (systemType == "android") {
68. header.style.paddingTop = '25px';
69. }
70. $api.fixStatusBar(header);
71. } else {
72. $api.fixIos7Bar(header);
73. }
74. var headerPos = $api.offset(header);
75. if ( typeof callback == "function") {
76. callback(headerPos);
77. }
78. }
79. apiready = function() {
80. // 获取底部的高度
81. var footer = $api.byId("footer");
82. var footerPos = $api.offset(footer);
83. fixStatusBar("header", function(headerPos) {
84. api.openFrame({
85. name : 'main',
86. url : './html/main.html',
87. rect : {
88. x : 0,
89. y : headerPos.h,
90. w : api.winWidth,
91. h : api.winHeight - headerPos.h - footerPos.h // footerPos.h是底部的高度,也可以直接获取main的高度
92. },
93. pageParam : {
94. },
95. bounces : true,
96. bgColor : 'rgba(0,0,0,0)',
97. vScrollBarEnabled : false,
98. hScrollBarEnabled : false
99. });
100. });
101. };
102. </script>
103. </html>

复制代码