AUI 是Apicloud 的手机端UI第三方，需要引入Apicloud和AUI中的css样式和js框架
**首先：手机项目必须配置config.xml文件 Apicloud官网有详解
**
其次：程序会默认进入index.html页面，开始程序的加载显示
具体代码如下：
-
1、<meta charset="utf-8">和<meta http-equiv="content-type" content="text/html; charset="utf-8">
-
-
解释：在HTML5,他们是等价的。使用更短,更容易记住和类型。浏览器支持很好,因为它是设计用来向后兼容的。
-
-
2、<meta meta http-equiv="X-UA-Compatible" content="IE=edge">
-
详解： http://www.cnblogs.com/jinling/p/4719114.html
-
-
3、需要引入aui的css样式 在头文件中
-
例如：外联引入< link rel="stylesheet" type="text/css" href="../css/aui.css">
-
css 可以在head中引入 ： <style type="text/css">
-
-
4、修改aui中css的样式必须要!important
-
例如： .aui-iconfont {
-
font-size: 22px !important;
-
}
-
-
5、设置手机的导航视图：使用盒子div包裹起来
-
例如：<div class="aui-bar aui-bar-nav aui-bar-warning" id="aui-header">div>
-
aui-bar:头部的样式
-
aui-bar-nav：导航样式
-
aui-header：js使用
-
-
6、引入js框架，调用对应的js方法，获取页面元素位置和内容等，打开和关闭窗口
-
-
例如：<script type="text/javascript" src="./script/api.js">
-
-
apiready = function() ：和js中ready（）方法意思差不多，等html加载完执行该方法
-
-
api.parseTapmode(); ：解析元素 tapmode 属性，优化点击事件处理 ，默认页面加载完成后，引擎会对 dom 里面的元素进行 tapmode 属性解析，若是之后用代码创建的 dom 元素，则需要调用该方法后 tapmode 属性才会生效
-
-
var header = $api.byId('aui-header');：通过id选择dom
-
-
$api.fixIos7Bar(header);* ：适配系统ios7 导航和状态栏的20px
-
-
var headerPos = $api.offset(header);：描述：获取元素在页面中的位置与宽高，(此为距离页面左侧及顶端的位置，并非距离窗口的位置)
-
-
用法：. offset (el)
-
参数：el(类型：Element)：DOM元素
-
返回值：该元素的位置（left,top）
-
及宽高（width,height）,返回值是json类型的，
-
包括l,t,w,h属性
-
-
var body_h = $api.offset($api.dom('body')).h;
-
描述：选择首个匹配的DOM元素
-
用法：
-
.dom(el, selector)
-
从el元素开始查找
-
参数：
-
el (类型：Element)：DOM元素
-
selector (类型：Selector)：CSS 选择器
-
返回值： 返回首个匹配的DOM元素
-
-
api.openFrame({
-
name: 'main',
-
url: 'html/main.html',
-
rect: {
-
x:0,
-
y:headerPos.h,
-
w:'auto',
-
h:'auto'
-
}
-
bounces: false,
-
});
-
-
注释：打开新的窗口 1、窗口名字 2、窗口路径 3、窗口位置 4、是否可以回弹，类似IOS scroll的回弹效果，默认yes
-
-
7、引导页详解
-
-
7.1 样式总结：
-
/*设置首页的图片 样式*/
-
img.logo {
-
/*设置宽度*/
-
width: 30%;
-
/*圆角*/
-
border-radius: 10px;
-
/*下边距*/
-
margin-bottom: 15px;
-
}
-
/*设置后面几张图片 的样式*/
-
img.icon {
-
width: 50%;
-
border-radius: 10px;
-
}
-
/*设置 文本的整体样式*/
-
strong {
-
/*字体大小*/
-
font-size: 2em;
-
/*设置 字体 粗度*/
-
font-weight: 400;
-
}
-
/*第二页的背景颜色*/
-
.bg1 {
-
**/*background: #d9e2e5 !important;*/**
-
**background:#C0392B !important;**
-
**}**
-
/ *第三个页面的背景颜色 必须引入*/
-
**.bg2 {**
-
**/*background: #eee9e0 !important;*/**
-
**background:#0062CC !important;**
-
**}**
-
/ *webkit 浏览器的兼容*/
-
**@-webkit-keyframes fadeInTop {**
-
**from {**
-
**opacity: 0.2;**
-
**-webkit-transform: translate3d(0, -50px, 0);**
-
**transform: translate3d(0, -50px, 0);**
-
**}**
-
**to {**
-
**opacity: 1;**
-
**-webkit-transform: none;**
-
**transform: none;**
-
**}**
-
**}**
-
**/*设置返回按钮的样式*/**
-
**.close {**
-
/ *设置背景颜色 透明度*/
-
**background: rgba(0,0,0,0.6);**
-
/ *设置内间距*/
-
**padding: 4px 10px;**
-
/ *设置边框的圆角*/
-
**border-radius: 30px;**
-
/ *字体的颜色*/
-
**color: #fff;**
-
/ *字体的大小*/
-
**font-size: 0.75em;**
-
/ *绝对位置 类似float的浮动 */
-
**position: absolute;**
-
/ *绝对位置的 右侧距离*/
-
**right: 10px;**
-
/ *绝对位置的左侧 距离*/
-
**top: 30px;**
-
/ *在z轴的位置 数字越大距离自己越近*/
-
**z-index: 999;**
-
}
-
**7.2 body内容总结**
-
****
-
**close" tapmode οnclick="closeWin()">关闭**
-
注释： **tapmode 用户加速 按钮的响应事件 **
-
****onclick 指定响应的事件****
-
**">********15 aui-text- center aui-hide">****
" class="logo" />**
** ****************** -
**注释：**aui-slide : 设置滚动样式****
-
******aui-slide-wrap : 承载滚动内容的容器******
-
********aui-slide-node : 设置节点样式********
-
**********aui-slide-node-middle： 设置节点居中**********
-
************aui-slide-node-center：设置节点内容居中************
-
**************aui-content ： 内容样式**************
-
****************aui-padded-15：内间距15px****************
-
******************aui-text-center：文本居中******************
-
********************aui-hide：隐藏超出div的部分********************
-
********************aui-text-primary：设置字体的样式********************
-
** ：强调 加粗字体**
-
****************************************
-
******************7.3 js事件总结******************
-
******************首先：要先引入aui的js框架******************
-
******************例如：script type="text/javascript" src="../script/aui-slide.js"******************
-
******************其次：js代码写在