在移动应用开发过程中，发布应用到对应的应用商店是非常重要的一步。iOS和Android两个平台都自带了应用商店，分别为App Store和Google Play。开发者需要按照对应的规定将应用打包上传到市场上。而这一直到今天都是个艰巨的任务，不过相对来说，HTML5的出现让我们的这个需求得到了缓解。下面我们就来详细介绍一下，开发布局是用HTML的原理。
## HTML5的优势
随着HTML5的应用越来越广泛，开发者也开始认识到它的优势所在，并将它应用到Web应用的开发中。HTML5有很多的优势，其中比较重要的有以下两个：
### 跨平台性
Web应用的一个重大优势就是可以在所有平台上运行。无论是手机、平板、笔记本或者是桌面电脑，只要有浏览器，就可以打开你的Web应用。
### 离线访问
HTML5提供了一个应用缓存的机制，这样使得应用可以在离线情况下使用。这个应用缓存和浏览器缓存是分离的，这意味着你的应用代码和数据可以被缓存下来，在网络环境不好或者没有网络的情况下依然可以运行。
## 把Web应用打包为App
了解了HTML5的优势之后，我们可以想到把Web应用直接使用浏览器运行。但是，这样做也面临一个问题，就是浏览器往往会占用较多的系统资源，这样会导致应用运行不流畅。但如果将Web应用转换为原生应用，那么我们就可以完全避免这个问题。
### 原生应用
对于原生应用，在不同的平台上有不同的开发方式。开发iOS应用，需要使用Objective-C或者Swift；开发Android应用，需要使用Java。采用原生开发的好处是可以获得系统级别的API支持。比如你可以使用摄像头、GPS、文件系统和其他设备等。
### 将Web应用转换为原生应用
在充分利用了HTML5的跨平台、离线访问等优势之后，我们再利用一些第三方的工具将Web应用打包为原生应用。这种方式的好处是可以快速地将已有的Web应用转化为原生应用，并且是在不同平台上都能使用。下面分别讲述一下iOS和Android的打包方式。
#### iOS
为了让Web应用在iOS上运行得更像原生应用，我们需要使用Cordova、PhoneGap等框架。
首先，打开终端命令行，在终端输入以下命令安装Cordova：
```sh
npm install -g cordova
```
接下来，创建一个基于Web的项目，并使用Cordova将它打包成原生iOS应用。
```sh
cordova create myApp
cd myApp
cordova platform add ios
cordova build ios
```
第一个命令用来创建项目文件夹，第二个命令用来进入项目文件夹，第三个命令用来添加iOS平台，第四个命令用来打包应用。
打包完成后，就可以在Xcode中部署、测试或上传到App Store了。
#### Android
对于Android应用，我们需要使用PhoneGap或者Cordova等框架。
首先，安装PhoneGap：
```sh
npm install -g phonegap
```
然后，创建一个基于Web的项目，并在项目中添加Android平台：
```sh
phonegap create myApp
cd myApp
phonegap platform add android
```
最后，打包应用：
```sh
phonegap build android
```
打包完成之后，就可以在Android Studio中部署、测试或上传到Google Play了。
## 总结
HTML5提供了很多非常有用的特性，这些特性使得Web应用变得更加完善和功能强大。为了搭建跨平台工程，我们将Web应用打包成原生应用。虽然打包过程有些复杂，但是若理解其中原理，那么开发就会变得更加容易。
