HBuilder開發App教程06-首頁
實戰
前面幾節基本是一些概念的普及，
正如前面提到的，本教程會以滴石作為範例進行講解，
有興趣的可以先行下載體驗一下，或者下載原始碼研究下。
新建專案
開啟HBuilder，在專案管理器中右鍵——新建——移動app，或者直接ctrl+n，a，
見到如下介面，填入專案名稱，選擇mui專案，
新建完成後，預設生成的目錄如下，基本和前端開發的目錄結構類似，
連線手機
本教程暫時以android為例，最後會另外講解ios手機的開發，大同小異。
用資料線連線android手機，將手機中的設定——開發人員工具——usb除錯，開啟，
選中之前新建的專案，選擇選單，執行——手機執行——你的手機，或者直接ctrl+r，
如果提示檢測不到手機，你可以下載個應用寶之類的軟體，應用寶會幫你搞定，
如果手機正常連線，控制檯會顯示如下資訊，成功後，你的app已經在手機上運行了，
雖然是一個空白頁，但是感覺下前端做app的樂趣吧。
慢慢來~
頁面結構
首先說下檔案存放結構，
js資料夾下新建lib和app資料夾，分別放工具js和頁面js，如下
需要提到的是，工具js採用jquery，應該jquery很強大，
有的人會疑問jquery比較大，用jquery是不是不太好，
那你就錯了，你還停留在網頁的思維，
其實HBuilder最終會把這些js都打到app包內，
其實你呼叫jquery就是呼叫的app包內的js了，
不存在大不大，費不費流量的問題了。
然後是頁面結構，
你可以看到首頁是分為index部分，也就是可見的頭部，有時候是頭部和底部，
還有list部分，也就是中間部分，為什麼要這麼做，為了讓app更加逼真，
你也可以嘗試自己把index和list放到一起，最終的最終你還是會採用這種方法的。。
index.html
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <!-- mui --> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-icon mui-icon-bars mui-pull-left menua"></a> <a class="mui-icon mui-icon-plus mui-pull-right adda"></a> <h1 class="mui-title">滴石</h1> </header> <!-- jquery --> <script type="text/javascript" src="js/lib/jquery-1.11.2.min.js"></script> <!-- qiao.js --> <script type="text/javascript" src="js/lib/qiao.js"></script> <!-- app --> <script type="text/javascript" src="js/app/index.js"></script> </body> </html>
1.meta
不多說了，必須的，第二個是適應移動端
2.mui
mui的js和css是必須的，mui負責了app的ui介面和app和原生互動的封裝，
你也可以用採用bootstrap或者amazeui或者jquery mobi等ui，但是這裡還是推薦mui。
3.header
其中mui-pull-left代表浮動到左邊，right到右邊，mui-icon-*代表各種字型圖示，
關於字型圖示可以看這裡，如果mui自帶的沒法滿足，你可以在這裡下載引入：http://www.iconfont.cn/
4.好習慣
將與頁面初始化無關的js引入到body的最底部是一個好習慣，
這裡引入了jquery和我自己的一些封裝qiao.js，以後詳細解說，最後是index頁面對應的js