跟绝大多数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. 关于python中的字符串编码理解

    python2.x 中中间编码为unicode,一个字符串需要decode为unicode,再encode为其它编码格式(gbk.utf8等) 以gbk转utf8为例: s = "我是字符串 ...

  2. C#创建文件夹，往里追字符串。

    /// <summary>写文本日志</summary> /// <param name="StrMessage">日志消息</param ...

  3. eclipse的package, folder, source folder 异同以及相互转化

    1 相同点:都是文件夹; 不同点: 我们用面对对象思维来看; 首先说folder, 三者的父类(object),就是普通的文件夹,它和我们window下面使用的文件夹没有任何区别; source fo ...

  4. nodejs学习

    转自于网络: ubuntu 下面安装 vim 的问题 1.输入vim时,显示: 程序"vim"已包含在以下软件包中: * vim * vim-gnome * vim-tiny * ...

  5. vim 基本使用

    vim 下基本命令 重新加载 .vimrc source ~/.vimrc 列出当前缓冲区的所有文档 ls 然后使用 b+编号 移至该文档 选中多行 v + shift 然后 j k 上下移动 缩进单 ...

  6. 解决scrollview和viewpager冲突

    import android.content.Context; import android.util.AttributeSet; import android.view.MotionEvent; i ...

  7. Good Bye 2016 - C

    题目链接:http://codeforces.com/contest/750/problem/C 题意:在CF中,每个人都有个Rank值. 当Rank>=1900时,为DIV1.Rank< ...

  8. redis——学习之路五(简单的C#使用redis)

    redis官方推荐使用的客户端程序 打星星表示推荐使用的客户端程序,一个笑脸表示最近6个月内有过正式活动的.http://redis.io/clients/#c 从这里我们可以判断官方推荐我们使用Se ...

  9. SQl 2005 For XMl 简单查询(Raw，Auto，Path模式)(1)

    很多人对Xpath可能比较熟悉,但不知道有没有直接操作过数据库,我们都知道 在Sql2005里公支持的几种查询有Raw,Auto模式,页并没有Path和Elements用法等,如果在2000里使用过 ...

  10. 一个快速排序（分类）及使用类似思想实现选择问题[c++实现]

    一.快速排序(快速分类)算法: 问题描述:给定线性集中n个元素和一个整数k,1<=k<=n,要求找出这n个元素中第k小的元素. 思想:选取数组A中的某个元素 t=A[s],然后将其他元素重 ...