**首先：手机项目必须配置config.xml文件 Apicloud官网有详解
**
其次：程序会默认进入index.html页面，开始程序的加载显示
具体代码如下：
1、<meta charset="utf-8">和<meta http-equiv="content-type" content="text/htmlcharset="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 属性才会生效
<!doctype html><html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<link rel="stylesheet" href="../css/weui.css"/>
<link rel="stylesheet" href="../css/weui2.css"/>
<link rel="stylesheet" href="../css/weui3.css"/>
<link rel="stylesheet" type="text/css" href="../css/aui.css" />
<script src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
</head>
<body ontouchstart style="background-color: #f8f8f8">
<header class="aui-bar aui-bar-nav" id="aui-header">顶部导航栏</header>
<footer class="aui-bar aui-bar-tab" id="footer">
<div id="tabbar1" class="aui-bar-tab-item aui-active" onclick="randomSwitchBtn(0)">
<i class="aui-iconfont aui-icon-home"></i>
<div class="aui-bar-tab-label">首页</div>
</div>
<div id="tabbar2" class="aui-bar-tab-item" tapmode onclick="randomSwitchBtn(1)">
<i class="aui-iconfont aui-icon-phone"></i>
<div class="aui-bar-tab-label">未接</div>
</div>
<div id="tabbar3" class="aui-bar-tab-item" tapmode onclick="randomSwitchBtn(2)">
<i class="aui-iconfont aui-icon-cart"></i>
<div class="aui-bar-tab-label">已结</div>
</div>
<div id="tabbar4" class="aui-bar-tab-item" tapmode onclick="randomSwitchBtn(3)">
<i class="aui-iconfont aui-icon-my"></i>
<div class="aui-bar-tab-label">呼出</div>
</div>
</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
//获取顶部菜单元素
var header = $api.byId('aui-header')
//获取元素在页面中的位置与宽高
var headerPos = $api.offset(header)
//获取窗口高度
var body_h = api.winHeight
//获取底部导航的高度
var footer_h = $api.offset(footer).h
//导航页面组
api.openFrameGroup ({
name: 'group1',
background: '#fff',
scrollEnabled:true,
//导航页面显示的长宽高
rect: {
x: 0, //左边从哪里显示
y: headerPos.h, //从哪个高度下显示
w: 'auto', //宽度
h: body_h - headerPos.h - footer_h //页面显示的高度
},
//初始导航页面显示
index: 0,
//导航页面组
frames: [{
name: 'testframe1',
url: 'testframe1.html',
bgColor: '#fff'
},{
name: 'testframe2',
url: 'testframe2.html',
bgColor: '#fff'
},{
name: 'testframe3',
url: 'testframe3.html',
bgColor: '#fff'
},{
name: 'testframe4',
url: 'testframe4.html',
bgColor: '#fff'
}]
}, function(ret, err){
if( ret ){
alert( JSON.stringify( ret ) )
}else{
alert( JSON.stringify( err ) )
}
})
}
//点击实现导航页面跳转，对应导航菜单常亮
function randomSwitchBtn(index){
//放入对应的导航页面参数,实现导航跳转
api.setFrameGroupIndex({
name: 'group1',
index: index,
scroll: true
})
}
</script>
</html>
需要把图标换成字体图标,阿里巴巴图标库可以把图标转成字体图标，自定义的图标需要用svg然后转换。
下载出来引用字体图标样式。在样式表中引用字体图标
@font-face {font-family: "aui_iconfont"
src: url('aui-iconfont.2.0.ttf') format('truetype')
}//字体引用方式
arrow-left:before { content: "\e6eb"}//字体图标的命名和生成的字体
把字体图标的命名引用到对应的div即可<div class="aui-iconfont aui-icon-left"></div>生成如下效果图。
可以使用背景图设置，使用背景精灵图 把图标放在一张图片上面，通过定位位移来找到图片。
切成小图标 一个位置对应一个图标。
