跟絕大多數PhoneGap程序一樣，Index.html是程序的入口。這個頁面應該完成應用程序的初始化工作。
首先，讓我們來看看這個頁面通常都長什么樣子：
下面我將一一解釋這個頁面都做了哪些初始化工作。
2.1 引用所有的CSS
所有的CSS都應該在放在index.html里面，這樣做的好處是其他頁面會變得很干凈，不會到處都在引用CSS，使得CSS更容易管理。
你可以使用SASS來編寫CSS，但最后請一定把所有的CSS合并到一個文件。在我的試驗中，當index.html引用了太多CSS和JS的時候，程序啟動時間變長，并且容易崩潰。
2.2 引用所有的Javascript
跟CSS一樣，所有的JS也需要合并到一個文件，當然你可以保留一些重型的庫，如cordova, jquery, nova. 具體JS文件的組織和管理我會在第五章文件結構中詳細敘述。這里你需要理解的是，在index.html加載完成的時候，你寫的所有的JS都已經加載了，這樣當你想使用某一個對象或者類的時候，你不用等待加載相關的JS文件。這里我推薦使用grunt來進行JS文件的合并和壓縮, 具體的內容我會在第十章開發環境中詳細描述.
2.3 初始化本地數據庫
在我們的這個框架中,本地數據庫采用HTML5 SQLite。數據庫的表結構是由代碼來定義和生成的，如果你熟悉EntityFramework（EF）的話，你會發現，該框架提供的數據庫的定義正好跟EF的CodeFirst模式一樣，對數據庫的訪問也跟EF非常類似，這也是我一直想要達到的效果。
在index.html，數據庫通過代碼來生成，以及初始化一些初始數據。
2.4 設置應用程序的UI殼
首先，讓我們特別注意id為body的這個div。這個div#body在我們的框架中起著非常重要的作用，因為它在應用程序啟動的時候被設置了固定的、跟屏幕大小一致的寬和高，并且設置了樣式overflow:hidden。 這樣一來，我們所有頁面的所有HTML元素都將在這個固定的div里面呈現。有了這個固定的div，我們要做fixed header, fixed footer以及fixed anything 都將易如反掌。
如果說index.html是整個應用程序的殼的話，那么這個殼的最外層是<html>標簽，殼的最里層就是div#body。這個殼無比堅韌，以至于里面的任何內容都無法超出div#body。
當然，我們也可以增加這個殼的厚度，或是加一些裝飾品。根據項目需要，你可以任意定制這個index.html，比如用div包裹div#body， 或是增加導航、菜單元素。
當所有初始化工作完成之后，就可以加載程序的第一個頁面了，比如登陸頁面。在下一章中，我將詳細介紹如何呈現一個頁面，以及頁面跳轉、傳值、事件等。
文章列表
留言列表
