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.                                   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.                                   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.                 }
80.                 apiready = function() {
81.                         // 获取底部的高度
82.                         var footer = $api.byId("footer");
83.                         var footerPos = $api.offset(footer);
84.                         fixStatusBar("header", function(headerPos) {
85.                                 api.openFrame({
86.                                         name : 'main',
87.                                         url : './html/main.html',
88.                                         rect : {
89.                                                 x : 0,
90.                                                 y : headerPos.h,
91.                                                 w : api.winWidth,
92.                                                 h : api.winHeight - headerPos.h - footerPos.h // footerPos.h是底部的高度,也可以直接获取main的高度
93.                                         },
94.                                         pageParam : {
95.                                         },
96.                                         bounces : true,
97.                                         bgColor : 'rgba(0,0,0,0)',
98.                                         vScrollBarEnabled : false,
99.                                         hScrollBarEnabled : false
100.                                 });
101.                         });
102.                 };
103.         </script>
104. </html>

复制代码