跟绝大多数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， 或是增加导航、菜单元素。

当所有初始化工作完成之后，就可以加载程序的第一个页面了，比如登陆页面。在下一章中，我将详细介绍如何呈现一个页面，以及页面跳转、传值、事件等。

Nova PhoneGap框架 第二章 理解index.html的更多相关文章

  1. Nova PhoneGap框架 第一章 前言

    Nova PhoneGap Framework诞生于2012年11月,从第一个版本的发布到现在,这个框架经历了多个项目的考验.一直以来我们也持续更新这个框架,使其不断完善.到现在,这个框架已比较稳定了 ...

  2. Nova PhoneGap框架 第九章 控件

    我们的框架中也提供了一些常用的控件,这些控件大多都依赖于我们的框架,也正是在我们的框架下才使得实现这些控件的变得更简单.但是我们的框架是不依赖与这些控件的,如果你用不上这些控件,你完全可以把相关的代码 ...

  3. Nova PhoneGap框架 第五章 文件结构

    一个好的项目架构必然有着合理的文件结构,如果一个项目的文件组织混乱,那么可以断言一定是项目架构有问题. 合理的文件结构能够帮你更清晰的管理你的文件,并且当需要添加新的文件的时候,你的程序员很清楚应该加 ...

  4. Nova PhoneGap框架 第七章 设备事件处理

    我们的框架包含了几种设备事件的处理,目的是为了让我们的程序员更容易的完成代码.这些事件包括:回退键(Android)和横竖屏切换事件. 7.1 Android回退键 首先来说说回退键的事件处理.当用户 ...

  5. Nova PhoneGap框架 总结

    Nova PhoneGap Framework 是完全针对PhoneGap应用程序量身定做的,在这个框架下开发的应用程序很容易实现高质量的代码,很容易让程序拥有很好的性能和用户体验. 在经历了多个项目 ...

  6. Nova PhoneGap框架 第八章 滚动条

    你可能会疑惑为什么滚动条这么常见的功能会在这里单独列出,但如果你有过PhoneGap开发经验的话,你就会发现要在Android 2.3 里面实现滚动条那真不是一件容易的事. 8.1 概述 目前主流的P ...

  7. Nova PhoneGap框架 第四章 本地数据库

    我一直想把EntityFramework(简称EF)的那一套搬过来,应用于HTML5 SQLite. 幸运的是,我几乎做到了,有些功能无法完成的那是因为SQLite本身不支持.至少从现在已经完成的功能 ...

  8. Nova PhoneGap框架 第六章 使用Mock

    在我们的框架中引入了一个很重要的设计,那就是使用Mock. 这里的mock是指cordova.mock.js文件,它模拟了PhoneGap(Cordova)的API,从而可以在浏览器中运行测试我们的程 ...

  9. Nova PhoneGap框架 第三章 页面

    页面在项目架构中是一个很重要的概念,它让我们能够将一个功能复杂的项目拆分成一个一个功能比较独立的小区域,这极大的提高了代码的可读性和可维护性. 在我们这个框架中,一个页面由JS和HTML两部分组成,首 ...

随机推荐

  1. C++ 系列：编译 boost

    Copyright © 1900-2016, NORYES, All Rights Reserved. http://www.cnblogs.com/noryes/ 欢迎转载,请保留此版权声明. -- ...

  2. 解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题

         在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...

  3. Android功能点

    1.获取屏幕尺寸.密度等信息. 1)最常用的方法: WindowManager windowManager = getWindowManager(); Display display = window ...

  4. 再探JS数组原生方法—没想到你是这样的数组

    最近作死又去做了一遍javascript-puzzlers上的44道变态题,这些题号称"JS语言专业八级"的水准,建议可以去试试,这里我不去解析这44道题了, ...

  5. postgresql数据库

    新建一个虚拟机,在本地跑程序,连虚拟机数据库报错: no pg_hba.conf entry for host "192.168.1.4" Google下,发现是要修改postgr ...

  6. windows下指定格式文件转移

    #放在目录下执行 1.bat 作用:将该目录下所有mp4格式的文件转移至该目录下的target目录下 须保证target目录不存在@echo off md target\ for /f "d ...

  7. D3中数据与DOM element绑定之data() enter() exit()浅析

    几个非常有用的links: [1] three little circles. http://bost.ocks.org/mike/circles/ [2] How selection works.  ...

  8. JAVABeanUtils

    在写如何使用java BeanUlits 之前需要清楚几件事情 1. 我们每次所定义的类,其实是实体,同时也被称作为JavaBean; 2.  为什么我们要使用BeanUlits这个框架     &g ...

  9. iOS Swift 3 open

    参考资料:http://stackoverflow.com/questions/38947101/what-is-the-open-keyword-in-swift

  10. MCMC 、抽样算法与软件实现

    一.MCMC 简介 1. Monte Carlo 蒙特卡洛 蒙特卡洛方法(Monte Carlo)是一种通过特定分布下的随机数(或伪随机数)进行模拟的方法.典型的例子有蒲丰投针.定积分计算等等,其基础 ...