H5（HTML5）是一种新的Web标准，它为开发人员提供了更多的功能和标准。在移动设备普及的今天，H5也成为了移动开发的一种主流技术，用户可以通过Web浏览器来访问应用程序的服务。但是，对于一些需要离线使用的应用程序，使用H5技术开发的应用在这方面存在缺陷。因此，将H5应用打包成为可以直接安装的原生应用是一个很好的解决办法。
在打包H5应用为移动应用时，最常见的是将H5应用转化为能够在iOS设备上运行的应用，这里将介绍如何利用Cordova技术打包H5为iOS app，让你的H5应用能够直接安装到iOS设备上。
## 前期准备
- Xcode：必须安装Xcode并有开发者账号
- Node.js：由于使用Cordova需要使用npm，同时可能需要新建一个项目，需要使用一些npm包进行配置和打包。
## 步骤
### 1. 安装Cordova
首先，需要安装cordova，可以使用npm命令安装：
```
npm install -g cordova
```
### 2. 新建Cordova项目
打开终端，进入项目路径，执行以下命令：
```
cordova create HelloCordova com.example.hellocordova HelloCordova
```
使用上面的命令新建一个名为“HelloCordova”的cordova项目，并且包含有iOS平台；com.example.hellocordova是包名，HelloCordova是应用名称，应根据自己的需求修改。
### 3. 添加iOS平台
```
cordova platform add ios
```
### 4. 将H5应用添加到项目中
将原本H5应用的源码和依赖包放到新建的项目中。
### 5. 配置应用
在Cordova项目中，配置文件分为config.xml、www/index.html和其他Config.json、package.json等文件。
#### 5.1 config.xml
主要指定应用程序信息，包括应用程序名称、图标、启动画面等。在应用程序开发完成之后，将会把这个config.xml文件转换成一个iOS平台的信息文件–Info.plist文件。
在info.plist中，测试证书可能面临到app闪退，因此一般推荐使用App Store Distribution证书。在发布到App Store的时候，使用正式证书即可。
下面是config.xml的部分解析：
```xml
A sample Apache Cordova application that responds to the deviceready event.
Apache Cordova Team
```
#### 5.2 package.json
主要依赖包的安装、启动等命令配置；
下面是部分package.json的配置信息示例：
```json
{
"name": "productname",
"version": "0.0.1",
"description": "A sample Apache Cordova application that responds to the deviceready event.",
"devDependencies": {
"cordova": "^9.0.0"
},
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-vibration": {},
"cordova-plugin-screen-orientation": {},
"cordova-plugin-inappbrowser": {},
"cordova-plugin-dialogs": {},
"cordova-plugin-network-information": {},
"cordova-plugin-camera": {},
"cordova-plugin-media-capture": {},
"cordova-plugin-media": {},
"cordova-plugin-file-transfer": {},
"cordova-plugin-file": {},
"cordova-plugin-geolocation": {},
"cordova-plugin-contacts": {},
"cordova-plugin-globalization": {},
"cordova-plugin-legacy-whitelist": {},
"cordova-plugin-crop": {},
"cordova-plugin-androidx": {},
"cordova-plugin-androidx-adapter": {},
"cordova-android-play-services-gradle-release": {},
"onesignal-cordova-plugin": {},
"cordova-plugin-x-socialsharing": {},
"cordova-plugin-remove-trailing-slashes": {},
"cordova-plugin-filepath": {},
"cordova-plugin-x-toast": {},
"cordova-plugin-device-orientation": {},
"phonegap-plugin-barcodescanner": {},
"cordova-plugin-secure-storage": {},
"cordova-plugin-battery-status": {},
"cordova-plugin-badge": {},
"cordova-plugin-fcm-with-dependecy-updated": {}
},
"platforms": [
"android",
"ios"
]
},
"dependencies": {
"@babel/core": "^7.6.4",
"@babel/preset-env": "^7.6.3",
"@types/lunr": "^2.3.10",
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-plugin-eslint": "^3.11.0",
"@vue/cli-plugin-pwa": "^4.5.4",
"@vue/cli-service": "^3.4.0",
"axios": "^0.19.0",
"better-scroll": "^1.13.2",
"codemirror": "^5.51.0",
"dayjs": "^1.8.16",
"es6-promise": "^4.2.5",
"fastclick": "^1.0.6",
"fs-extra": "^9.0.0",
"js-cookie": "^2.2.0",
"lunr": "^2.3.9",
"marked": "^0.7.0",
"numeral": "^2.0.6",
"qs": "^6.7.0",
"quill": "^1.3.6",
"sockjs-client": "^1.4.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vconsole": "^3.3.0",
"vee-validate": "^2.2.11",
"vue": "^2.6.10",
"vue-bus": "^1.0.6",
"vue-router": "^3.1.3",
"vue-scroller": "^2.2.4",
"vuex": "^3.1.1",
"vuex-persistedstate": "^2.5.2",
"xlsx": "^0.13.5",
"xlsx-style": "^0.8.13",
"zepto": "^1.2.0",
"zeptojs": "^1.0.3"
}
}
```
### 6. 打包应用
进入项目目录，在命令行中输入以下命令：
```
cordova build ios --release
```
以上命令将会生成包含Cordova引擎的XCode项目文件，文件位于HelloCordova/platforms/ios/，用Xcode打开该文件，然后进行签名、一些其他的资源配置、添加应用的图片、启动引导图等配置等等。
### 注意
1. 打包过程中出现问题，可以通过清除缓存，重
