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就不推荐了！）表示，如：

<div id="web-view">
<div id="header">
我是头部
</div>
<div id="main"></div>
<div id="footer"></div>
</div>

复制代码

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

<style type="text/css">
/*必须设置这个属性*/
html, body {
height: 100%;
}
#web-view {
display: -webkit-box;
display: -webkit-flex;
display: flex;
/* 下面三个控制子div的显示方式，是垂直显示 */
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
flex-flow: column;
/* 上面三个控制子div的显示方式，是垂直显示 */
height: 100%;
/*===== 如果想让div水平排布，可以使用下面代码 ====*/
/*-webkit-box-orient: horizontal;
-webkit-flex-flow: row;
flex-flow: row;
100%;*/
}
#header {
height: 44px;/*固定头部 */
background: #f00;
text-align: center;
line-height: 44px;
color: #fff;
}
#footer {
height: 50px;/*固定尾部*/
background: #00f;
}
#main {
/*设置main为伸缩布局*/
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
background: #00f;
}
</style>

复制代码

图片如下： <ignore_js_op>

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

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

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

<preference name="statusBarAppearance" value="true"/>
<preference name="iOS7StatusBarAppearance" value="true"/>
<preference name="softInputMode" value="resize"/>

复制代码

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

// 解决状态栏重合，并优化fixStatusBar代码,Android4.4版本以上添加25px
function fixStatusBar(headerid, callback) {
var header = $api.byId(headerid);
var systemType = api.systemType;
var systemVersion = parseFloat(api.systemVersion);
if (systemType == "ios" || (systemType == "android" && systemVersion >= 4.4)) {
if (systemType == "android") {
header.style.paddingTop = '25px';
}
$api.fixStatusBar(header);
} else {
$api.fixIos7Bar(header);
}
var headerPos = $api.offset(header);
if ( typeof callback == "function") {
callback(headerPos);
}
}

复制代码

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

apiready = function() {
// 获取底部的高度
var footer = $api.byId("footer");
var footerPos = $api.offset(footer);
fixStatusBar("header", function(headerPos) {
api.openFrame({
name : 'main',
url : './html/main.html',
rect : {
x : 0,
y : headerPos.h,
w : api.winWidth,
h : api.winHeight - headerPos.h - footerPos.h // footerPos.h是底部的高度,也可以直接获取main的高度
},
pageParam : {
},
bounces : true,
bgColor : 'rgba(0,0,0,0)',
vScrollBarEnabled : false,
hScrollBarEnabled : false
});
});
};

复制代码

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

<ignore_js_op>

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<title>小白之路</title>
<link rel="stylesheet" type="text/css" href="./css/api.css" />
<style type="text/css">
/*必须设置这个属性*/
html, body {
height: 100%;
}
#web-view {
display: -webkit-box;
display: -webkit-flex;
display: flex;
/* 下面三个控制子div的显示方式，是垂直显示 */
-webkit-box-orient: vertical;
-webkit-flex-flow: column;
flex-flow: column;
/* 上面三个控制子div的显示方式，是垂直显示 */
height: 100%;
/*===== 如果想让div水平排布，可以使用下面代码 ====*/
/*-webkit-box-orient: horizontal;
-webkit-flex-flow: row;
flex-flow: row;
100%;*/
}
#header {
height: 44px;/*固定头部 */
background: #f00;
text-align: center;
line-height: 44px;
color: #fff;
}
#footer {
height: 50px;/*固定尾部*/
background: #00f;
}
#main {
/*设置main为伸缩布局*/
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
background: #0f0;
}
</style>
</head>
<body>
<div id="web-view">
<div id="header">
我是头部
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
// 解决状态栏重合，并优化fixStatusBar代码,Android4.4版本以上添加25px
function fixStatusBar(headerid, callback) {
var header = $api.byId(headerid);
var systemType = api.systemType;
var systemVersion = parseFloat(api.systemVersion);
if (systemType == "ios" || (systemType == "android" && systemVersion >= 4.4)) {
if (systemType == "android") {
header.style.paddingTop = '25px';
}
$api.fixStatusBar(header);
} else {
$api.fixIos7Bar(header);
}
var headerPos = $api.offset(header);
if ( typeof callback == "function") {
callback(headerPos);
}
}
apiready = function() {
// 获取底部的高度
var footer = $api.byId("footer");
var footerPos = $api.offset(footer);
fixStatusBar("header", function(headerPos) {
api.openFrame({
name : 'main',
url : './html/main.html',
rect : {
x : 0,
y : headerPos.h,
w : api.winWidth,
h : api.winHeight - headerPos.h - footerPos.h // footerPos.h是底部的高度,也可以直接获取main的高度
},
pageParam : {
},
bounces : true,
bgColor : 'rgba(0,0,0,0)',
vScrollBarEnabled : false,
hScrollBarEnabled : false
});
});
};
</script>
</html>

复制代码