App项目的首页，index.html.
首页显示效果和样式的部分，不在此讨论，本项目采用的是mui框架。
mui框架（http://www.dcloud.io/mui.html）也是dcloud公司团队的框架，使用该框架的优点，1，以iOS 7为基础，补充部分Android特有控件，显示为原生UI效果；2.mui的窗口的管理，事件管理，ajax,上拉加载，下拉刷新等功能强大。笔者认为，第2点是最重要的。UI部分，也可以自行设计切图，mui不是必须的。
以下对笔者项目中的index.html的几个关键点做下重点说明：
1. 引入mui的js和css.
2. mui初始化.对于mui初始化的详细参数配置，后续文章将详细说明。
<script type="text/javascript" charset="utf-8">
mui.init();
</script>3. mui.plusReady. 关键点。
在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中。
mui.plusReady只在webview新创建（页面新创建）的时候执行，对于预加载的页面再次打开时，mui.plusReady不会再次执行。所以，如果有个函数，需要在每次打开页面的时候都要执行，则要使用【页面预加载】和【自定义事件】技术。
mui.preload的底层调用的是plus.webview.
mui.plusReady(function(){
console.log("当前页面URL："+plus.webview.currentWebview().getURL());
});ps: HTML5+扩展api(http://www.html5plus.org/doc/h5p.html),后续文章详细说明。
4. 页面预加载。
App H5页面和普通web H5页面的区别是，
（1）web h5页面，每次打开的时候，都是在浏览器里重新渲染的，也就是每次都要重新创建，而App h5页面，可以用每次新建的方式，可以用预加载页面的方式。每次新建页面的问题是，如果页面加载比较耗时，会出现白屏的情况，对于用户体验和上架都是极为不利的；
（2）页面之间切换。web h5页面的跳转，可用window.location或者a标签的href,但是对于混合开发App，这是不行的，因为app的页面之间显示是通过切换来实现的。
页面预加载代码如下：
<script type="text/javascript" charset="utf-8">
mui.init();
//详情页面
var linePage = null;
//mui.plusReady只在webview新创建的时候执行.mui.preload的底层调用的是plus.webview.
mui.plusReady(function(){
//先判定是否已经登录
if(!checkLogin()){
goPage('login.html','');
}
//页面预加载
if(!linePage){
linePage = mui.preload({
url:'linelist.html',
id:'linelist.html'
});
}
//会员中心页面预加载
mui.preload({
url:'userCenter.html',
id:'userCenter.html'
});
console.log("index.html加载完毕");
});
</script>通过mui.preload()的方式，是实现预加载的一种方法。预加载后，调用的方式如下：
//触发列表页面的事件
mui.fire(linePage,'lineID',{
lid:lid
});
//打开列表页面
mui.openWindow({
id:"linelist.html"
});mui.fire的作用是触发页面的自定义事件，第一个参数是页面对象(linelist.html)，第二个参数lineID，是在linelist.html页面中自定义的函数，第3个参数是向这个自定义函数的传递的参数。
mui.openWindow的作用是打开页面，只用配置页面的id即可,跟预加载的页面id一样。
5. 页面跳转
<div class="lvyous">
<a data-lid = "3">
<div class="lvyoue">
<img src="img/tue5.png" />
</div>
<h4>页面1</h4>
</a>
<a data-lid = "1">
<div class="lvyoue">
<img src="img/tue6.png" />
</div>
<h4>页面2</h4>
</a>
<a data-lid = "2">
<div class="lvyoue">
<img src="img/tue7.png" />
</div>
<h4>页面3</h4>
</a>
</div>//绑定页面的点击事件
mui(".lvyous").on('tap','a',function(){
if(!checkLogin()){
goPage('login.html','');
return;
}
var lid = this.getAttribute("data-lid");
//触发列表页面的事件
mui.fire(linePage,'lineID',{
lid:lid
});
//打开列表页面
mui.openWindow({
id:"linelist.html"
});
});