**首先：手机项目必须配置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>
现在比较常用的主流框架有Vue、React、Angular。Angular
Angular原名angularJS诞生于2009年，之前我们都是用jquery开发，自从angular的出现让我们有了新的选择，它最大的特点是把后端的一些开发模式移植到前端来实现，如MVC、依赖注入等，创新式的双向数据绑定不知简化了我们多少代码，让我们为之疯狂，特别是表单处理方面，从此名声大噪。
好的框架一般会有两个结果，一个继续不断更新迭代，避免被拍死在沙滩上，一个是被一些大公司收购焕发第二春，angular属于后者被google所收购，且从2.0后改名angular并使用微软的typescript作为开发语言，目前最新版本8.0，照说傍上google与微软这两条大船，前途应该不可限量才对，然而造化弄人，现在angular的市场份额已经被React这个后起之秀和Vue这颗新星远远地甩到脑后。
React
React，facebook出品，正式版推出是在2013年，比angular晚了4年，但得益于其创新式的VirtualDOM，性能上碾压angularJS，一经推出，火的一塌糊涂。 特点很多，VirtualDOM、JSX、Diff算法等，支持ES6语法，采用函数式编程，门槛稍高，但也更灵活，能让开发具有更多可能性。
Vue
Vue作为最后推出的框架（2014年），借鉴了前辈angular和react的特点（如VirtualDOM、双向数据绑定、diff算法、响应式属性、组件化开发等）并做了相关优化，使其使用起来更加方便，更容易上手，比较少适合初学者。网上有很多人说Vue不适合做大型项目，纯属扯淡，Vue在这方面已经优化得很好，当然，大量的响应式属性（监听属性）也许会用一定的性能损耗，但在硬件、网络大力发展的今天，这些细微的性能差异几乎感觉不到。
