跟绝大多数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. 收缩SQL Server数据库文件

    收缩整个数据库 DBCC SHRINKDATABASE (dbName) 收缩单个文件DBCC SHRINKFILE (FileName) 查找所有的文件名称USE dbNameEXEC sp_hel ...

  2. “Operation is not valid due to the current state of the object.”

    将Repeater单页显示的2000条数据一次性提交的时候出现这个错误: Operation is not valid due to the current state of the object. ...

  3. PLSQL Developer 连接oracle(64) (instantclient)错误及解决方案

    安装了PLSQL Developer 64bit,下载地址http://cy1.mqego.com/plsqldeveloperxx.zip. 1.安装完成后,输入数据库连接信息之后,提示如下错误 原 ...

  4. Dev Cpp 输出中文字符问题

    最近 c++ 上机作业,vc++6.0 挂了没法用,只好用 Dev Cpp 先顶替一下,然而在遇到输出中文字符的时候出现了乱码的情况,但这种情况又非常诡异.于是简单了解了一下写成此博客. [写在前面] ...

  5. iOS10以上关于访问权限设置

    记录一下: iOS对用户的安全和隐私的增强,在申请很多私有权限的时候都需要添加描述,但是,在使用Xcode 8之前的Xcode还是使用系统的权限通知框.要想解决这个问题,只需要在info.plist添 ...

  6. three.js立方体

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - ge ...

  7. 主成分分析 (PCA) 与其高维度下python实现(简单人脸识别)

    Introduction 主成分分析(Principal Components Analysis)是一种对特征进行降维的方法.由于观测指标间存在相关性,将导致信息的重叠与低效,我们倾向于用少量的.尽可 ...

  8. python基础03序列

    sequence 序列 sequence序列是一组有顺序的元素的集合 (严格的说,是对象的集合,但鉴于没有引入对象的概念,暂时说元素) 序列可以包含一个或多个元素,也可以没有任何元素 我们之前所说的基 ...

  9. Leetcode Implement Queue using Stacks

    Implement the following operations of a queue using stacks. push(x) -- Push element x to the back of ...

  10. 【BZOJ】3996: [TJOI2015]线性代数

    题意 给出一个\(N \times N\)的矩阵\(B\)和一个\(1 \times N\)的矩阵\(C\).求出一个\(1 \times N\)的01矩阵\(A\),使得\[ D = ( A * B ...