利用h5做app

HTML5 是一种用于网页的标准，但也可以用于开发移动 App，因为它提供了一些新的应用程序接口（API），比如应用缓存、本地存储、设备方向等。下面，我将介绍如何使用 HTML5 开发基于 Web 技术的移动应用程序，并且将在 iOS 和 Android 上运行。

1. 应用缓存

HTML5 的应用缓存可以让您将应用程序文件缓存在本地，以便用户可以在脱机时使用应用程序。首先，您需要在应用程序的 HTML 文件中使用 cache.manifest 文件。cache.manifest 文件是包含应用程序中所有文件的文件名的文本文件。其中的第一行应该是 “CACHE MANIFEST” 作为标识。在 HTML 文件中，您将需要包含一行的链接到缓存文件，如下所示：

< html manifest="cache.manifest">

一旦您的 HTML 文件指向了 cache.manifest 文件，您将需要在 cache.manifest 文件中列出应用程序中所有的资源，包括 HTML、CSS、JavaScript 和图片。其中的格式应该类似于：

CACHE MANIFEST

# Version 1.0

index.html

style.css

script.js

app.png

然后，当用户第一次启动应用程序时，应用程序将下载所有列出的文件并将它们缓存在本地。当用户断开连接时，应用程序会使用缓存中的文件。如果您稍后对文件进行更改并更新 cache.manifest 文件，则下次用户连接时，他们将下载更新的文件。

2. 本地存储

HTML5 还增加了一个本地存储功能，使应用程序可以像通过 Cookie 一样保存键/值对。这个本地存储被称为 Web 存储或者局部存储。有两种类型的 Web 存储可以使用：

sessionStorage：在用户关闭浏览器窗口之前保留存储数据。

localStorage：持久存储，直到用户删除该存储。

在您的应用程序中，您可以使用以下 API 从本地存储获取存储内容：

sessionStorage.getItem(key);

localStorage.getItem(key);

在您的应用程序中，您可以使用以下 API 将任意存储内容添加到本地存储中：

sessionStorage.setItem(key, value);

localStorage.setItem(key, value);

如果您想删除存储内容，则可以使用以下 API：

sessionStorage.removeItem(key);

localStorage.removeItem(key);

3. 设备方向

HTML5 还提供了一个新的 API，用于检测设备的方向。如果您使用智能手机或平板电脑，您应该知道设备方向的含义。在应用程序中，您可以使用以下 JavaScript 对象来检测设备的方向：

window.orientation

JavaScript 将返回值 0、90、-90 或 180：

0: 竖屏，某些浏览器（包括 Safari）将返回 0 度，即水平方向，而有些浏览器将返回 -90 度，因此需要进行检测并相应调整。

90: 横屏，设备向左旋转了 90 度。

-90: 横屏，设备向右旋转了 90 度。

180: 竖屏，设备向下旋转了 180 度。

4. 使用 PhoneGap 打包应用

一旦您完成了在 HTML5 中编写应用程序的过程，您可以使用 PhoneGap 工具将其打包为本地应用程序。PhoneGap 是一个跨平台的开源框架，它允许开发人员使用 Web 技术和语言（如 HTML、CSS 和 JavaScript）来开发本地应用程序。一旦您在本地打包了应用程序，您可以在应用商店中发布它，或直接分发给用户，用户可以通过下载并安装应用程序来使用您的应用。

总结

HTML5 的新应用程序接口（API）允许开发人员以 Web 技术开发移动应用程序。应用缓存、本地存储和设备方向都是使用 HTML5 进行应用程序开发的强大工具。与其他平台上的开发相比，使用 HTML5 开发具有许多好处，例如跨平台、易于学习和迅速上手，还可以使用许多强大的 JavaScript 库和框架。