WEB开发者之混合开发APP（四），index.html 首页_web项目带有index.html-优快云博客

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"
	});	
});

懂Html就能开发App，博文持续更新，博主QQ:260737830！