Hbuilder開發APP（一）——底部導航條簡單實現
Hbuilder是由DCloud（數字天堂）推出的一款支援HTML5的Web開發IDE，它最大的特點及優勢就是——快，通過完整的語法提示和程式碼輸入法、程式碼塊及很多配套，Hbuilder能大幅度提升HTML、js、css的開發效率。並且HBuilder本身主體就是基於Eclipse，所以能夠相容Eclipse的外掛。作為一款快速開發的IDE，其不僅能開發前端，還能開發APP，利用H5+技術，結合mui框架模板，就可以開發出非常漂亮的Android程式及IOS程式，想想是不是就很興奮呢，沒錯，從此你不再只是前端
更多Hbuilder的更多介紹大家自行百度，使用教程
這篇文章主要介紹一下簡單的 底部導航條 的實現，效果截圖：
（錄屏工具不能用了，小夥伴們自己可以在手機上跑一下，看一下效果）
看程式碼：
首先是index.html，所有的程式碼基本上都在這裡了：
我們來看一下上邊的程式碼，底部導航條標籤<nav>以及class屬性這些沒啥好說的，記住就行了，我們主要看mui中的函式。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <script src="js/login.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> </head> <body> <nav class="mui-bar mui-bar-tab" id="nav"> <a id="tab_home" class="mui-tab-item mui-active" > <span class="mui-icon mui-icon-home" ></span> <span class="mui-tab-label">首頁</span> </a> <a id="tab_message" class="mui-tab-item"> <span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">訊息</span> </a> <a id="tab_contact" class="mui-tab-item"> <span class="mui-icon mui-icon-contact"></span> <span class="mui-tab-label">通訊錄</span> </a> <a id="tab_setting" class="mui-tab-item" > <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">設定</span> </a> </nav> <script type="text/javascript" charset="utf-8"> mui.init({ subpages:[//首先載入首頁 { url:'html/home.html', id:'tab_home', styles:{ top:'0px', bottom:'60px' } } ], preloadPages:[//預載入其他頁面 { url:'html/message.html', id:'tab_message', styles:{ top:'0px', bottom:'60px' } }, { url:'html/contact.html', id:'tab_contact', styles:{ top:'0px', bottom:'60px' } }, { url:'html/setting.html', id:'tab_setting', styles:{ top:'0px', bottom:'60px' } } ] }); mui.plusReady(function(){ var tab_home,tab_message,tab_contact mui("#nav").on("tap","#tab_home",function(){//點選觸發 tab_home=plus.webview.getWebviewById("tab_home"); tab_home.show() tab_message.hide() tab_contact.hide() tab_setting.hide() }) mui("#nav").on("tap","#tab_message",function(){//點選觸發 tab_message=plus.webview.getWebviewById("tab_message"); tab_message.show() }) mui("#nav").on("tap","#tab_contact",function(){//點選觸發 tab_contact=plus.webview.getWebviewById("tab_contact"); tab_contact.show() }) mui("#nav").on("tap","#tab_setting",function(){//點選觸發 tab_setting=plus.webview.getWebviewById("tab_setting"); tab_setting.show() }) }) </script> </body> </html>
首先是mui.init()，mui框架將很多的功能配置都集中在mui.init()中，如果我們要使用某項功能，只需要在init中配置對應的引數即可，目前支援在init中配置的功能包括：建立子頁面、預載入、手勢事件配置、上拉載入、下拉重新整理、關閉頁面、設定系統狀態列背景顏色。如上程式碼所示，我們在init方法中配置了subpages:[{...}]（建立子頁面）、preloadPages:[{...}]（預載入），至於裡面的屬性 url、id、styles等不用解釋，都是老司機，當然還有一些其他的屬性，在此也不贅述。
注意：mui.init()是每個mui頁面都必須呼叫的，官方指出，頁面初始化，必須執行init方法。
接下來是mui.plusReady()，說這個之前有必要說說H5+了。
H5，即HTML5，全球資訊網的核心語言、標準通用標記語言下的一個應用超文字標記語言（HTML）第5次重大修改，2014年釋出，之後的瀏覽器都必須遵守這個開發規範實現對html、css、javaScript的解釋。
H5+，即HTML5 Plus，其實還是H5，只不過是在H5的基礎上增加了大量手機原生功能支援，包括wifi、gps、震動、攝像頭等軟硬體功能，通過js封裝呼叫Android原生介面使得H5開發APP更加強大，更加的接近原生。APP的開發必須使用H5+。
官方指出：在app開發中，若要使用H5+ 擴充套件API，必須等plusReady()事件發生後才能正常使用，mui將該事件封裝成了mui.plusReady()方法。涉及到H5+的API，建議都寫在mui.plusReady()方法中。
再來就是mui().on()方法了，事件繫結。
.on( event , selector , handler )
event：Type: String，需監聽的事件名稱，例如：‘tap‘
selector：Type: String，選擇器
handler：Type: Function( Event event )，事件觸發時的回撥函式，通過回撥中的event引數可以獲得事件詳情除了使用.on()方法實現批量元素的事件繫結外，也可以使用addEventListener()方法監聽某個特定元素上的事件（自行百度）。
最後就是 plus.webview.getWebviewById(id)這個了，在已建立的視窗列表中查詢指定標識的Webview視窗並返回，若沒有查詢到指定標識的視窗則返回null，若存在多個相同標識的Webview視窗，則返回第一個建立的Webview視窗。這讓我們也能聯想到在web開發中 document.getElementById(id) 返回對擁有指定Id的第一個物件的引用，android開發中 findViewById得到控制元件物件的引用。
好了，以上程式碼就說這麼多了，再看home.html 這個是首頁的程式碼，很簡單，就一個標題欄和內容，其他的三個模組 訊息、通訊錄、設定 程式碼都是一樣的，就不貼了：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
</head>
<body>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-back" href="/index.html"></a>
<h1 class="mui-title">首頁</h1>
</header>
<div class="mui-content" align="center">
<div id="home_content" class="mui-control-content mui-active">
<div class="mui-title" align="center">這是首頁</div>
</div>
</div>
</body>
</html>
ok，結束了，就是這麼簡單，不過這裡只是為了簡單實現而實現的，還有好多要優化的地方以及更專業的寫法，大家自己試著寫一下吧，相信難不倒你的。
注意：還有一個問題，就是<nav>實現底部導航條，其裡面的<a>標籤需要注意，我們做web開發使用<a>標籤中的href屬性來新增連結跳轉頁面，但是在這裡是不行的，
小夥伴們可以自己試一下。為什麼不行呢？？？因為用web做app，有一個無法避開的問題就是 轉場動畫；web是基於連結構建的，從一個頁面點選連結跳轉到另一個頁面，如果通過有重新整理的開啟方式，會出現白屏頁面等待，如果通過無重新整理的方式，用JS移入DOM節點（常見的SPA解決方案），會碰到很高的效能挑戰；DOM節點如果非常多的話，頁面太大，轉場動畫卡頓，不流暢，甚至導致瀏覽器崩潰；
因此，mui的解決思路是：單個的webview只承載單個頁面的dom，減少dom層級及頁面大小；頁面切換使用原生動畫，將最消耗效能的部分交給原生實現。
現在知道為啥連結跳轉不能用了吧。。。
over，收工。