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

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