使用 Cordova 将您的前端 JavaScript 应用打包成手机原生应用

假设我用 JavaScript 和 HTML 开发了一个前端应用，我想把该应用打包成能直接在手机上安装和运行（不通过浏览器）的原生应用，例如像下面这样。对应用的用户来说，他们得到的用户体验和真正的用 Android Studio 或者 XCode 开发的原生应用完全一致。

这是怎么做到的？

答案是使用 Apache 的开源框架，Cordova。

以 Android 框架为例，Cordova 能将您的前端应用里的 JavaScript 和 HTML 资源打包成 Android 原生的 apk 文件，可以直接在安卓手机上安装。运行时，这些 JavaScript 和 HTML 直接运行在 Cordova 提供的一个嵌入式的 WebView 控件里，对于手机用户来说，他们对此毫不知情，以为自己使用的是手机原生应用。

下面就跟着我一步一步来使用 Cordova 打包您的前端项目吧。

1. 在电脑上安装 nodejs，把安装后的目录加入到 Path 环境变量中去。

2. 使用 nodejs 的包管理器 npm 安装 Cordova。命令行：npm -g install cordova:

3. 创建一个新的文件夹，然后进入该文件夹，创建一个新的 Cordova 项目。命令行：

cordova create JerryUI5HelloWorld

于是一个新的 Cordova 项目被自动创建出来了。里面包含很多子文件夹。

Platforms 文件夹是空的，因为此时我们尚未添加该 Cordova 项目支持的移动平台。

4. 假设我们想打包成一个可以安装到 Android 平台的应用，那么得为该 Cordova 项目添加对 Android 平台的支持。使用命令行添加：cordova platform add android

命令行执行完毕后，我们敬如 platforms 文件夹，发现多了一个 android 文件夹，里面多出很多文件夹和资源。这些自动生成的东西都是最后打包生成安卓应用 APK 文件所必须的。

如果一切正常，我们会得到下面的目录结果。

5. www 文件夹下有个自动生成的 index.html 文件。我们用命令行 cordova prepare, 这个 index.html 会自动被拷贝到文件夹 platformsandroidassetswww 下面。这揭示了 Cordova 使用的一个最佳实践：我们所有的前端开发，都是直接在 Cordova 项目文件根目录的 www 文件夹内进行。开发结束后，使用 cordova prepare，根目录的 www 文件夹里的资源会自动被拷贝到该项目支持的移动平台对应的文件夹内，在我的例子里是 platformsandroidassetswww。

一切就绪了。现在使用命令行 cordova compile 进行打包，安卓应用的 APK 文件就生成在文件夹 platforms/android/build/output/apk 里了。

注意 cordova compile 这个命令需要您本地安装 Gradle，如果安装，会遇到下列错误消息：

Error: Could not find an installed version of Gradle either in Android Studio, or on your system to install the gradle wrapper. Please include gradle in your path, or install Android Studio。

我没有选择安装庞大的 Android Studio，而是下载了 gradle 的二进制版本，将其加入到 Path 环境变量中即可。

将 APK 安装到您的手机上，执行，您会看到下列这个默认的界面。这其实是 Cordova 项目创建后生成的缺省的 index.html 打包安装到手机后运行的效果。

剩下的事情就很容易了，把您的前端应用的所有资源全部拷贝到 Cordova 项目文件根目录下的 www 文件夹里，然后执行 cordova prepare, 将这些资源自动同步到文件夹 platformsandroidassetswww 下面，再次执行命令行 cordova compile 重新生成 APK 文件即可。

如果没有 Android 手机，也可以用 Android Studio 里提供的模拟器来测试。

在 Android Virtual Device Manager 里创建一个新的虚拟设备：

然后使用命令行将 cordova compile 生成的 APK 文件安装到模拟器上：

adb install j.apk

现在就能在 Android 模拟器里使用您的前端应用通过 Cordova 打包生成的应用了。

要获取更多 Jerry 的原创技术文章，请关注公众号"汪子熙"。