跟绝大多数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. 二.TimesTen原理及应用场景

    声明:本文章转自麻袋爸爸 一,TimesTen应用场景 在谈论TimesTen内存数据库应用场景之前,我们先来介绍一下什么是内存数据库,及其工作原理吧.内存数据库,顾名思义就是将数据存放在内存中,并通 ...

  2. SQL语句实现Split并合并查询结果

    需求是这样的,需要将数据库中的支付方式列(用";"分割的字符串)按支付方式拆分: 首先参考博客园split的文章,我采用方法2, IF EXISTS ( SELECT * FROM ...

  3. DNG格式解析

    Author:Maddock Date:2015.04.22 转载请注明出处:http://www.cnblogs.com/adong7639/p/4446828.html DNG格式基本概念 DNG ...

  4. 如何实现VoIP中大并发应用

    后台服务器实现高并发方式: 说明: 黄色皆为运营商或第三方对接系统的VoIP设备等. 前置服务器A与B为热备容灾模式,当A异常,立即跳转到B. 应用服务器做实时容灾处理. 数据库做实时容灾处理. 媒体 ...

  5. Python 学习第十七天 jQuery

    一,jQuery 知识详解 利用jquery 查找元素,操作元素 1,jquery 引入 <!DOCTYPE html> <html lang="en"> ...

  6. WebGL与three.js

    前面学习了一些webgl的基础知识,现在就用一下three.js写一个小例子,记录一下学习的过程. 效果图: 1.去github下载three.js,然后将它加载到网页中 <script src ...

  7. JavaScript高级程序设计-(4) 引用类型

    1.object var person={};//与new Object()相同 一般创建对象 var person=new Object(); person.Name="admin&quo ...

  8. python 爬虫（四）

    爬遍整个网络 1 当我们访问整个网络的时候,我们不可避免的会访问不同的网站,但是不同的网站会有完全不同的结构和内容... 现在一步一步的构建访问整个网络的脚本 I 从一个网站开始,每一次都爬向不同的网 ...

  9. Windows安装程序 报错 “已安装了较新版本” 导致无法安装程序的解决方法

    打开注册表 HKEY_CURRENT_USER\Software\Microsoft\Installer\Products ,“查找”程序名称 如果有程序名和安装程序相同的 ,删除整个 项 ! 然后就 ...

  10. Xcode 8 Simulator Stop Logging too much info

    按照以下内容设置即可: