使用Cordova將您的前端JavaScript應(yīng)用打包成手機(jī)原生應(yīng)用

假設(shè)我用JavaScript和HTML開發(fā)了一個(gè)前端應(yīng)用，我想把該應(yīng)用打包成能直接在手機(jī)上安裝和運(yùn)行（不通過(guò)瀏覽器）的原生應(yīng)用，例如像下面這樣。對(duì)應(yīng)用的用戶來(lái)說(shuō)，他們得到的用戶體驗(yàn)和真正的用Android Studio或者XCode開發(fā)的原生應(yīng)用完全一致。

這是怎么做到的？

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

以Android框架為例，Cordova能將您的前端應(yīng)用里的JavaScript和HTML資源打包成Android原生的apk文件，可以直接在安卓手機(jī)上安裝。運(yùn)行時(shí)，這些JavaScript和HTML直接運(yùn)行在Cordova提供的一個(gè)嵌入式的WebView控件里，對(duì)于手機(jī)用戶來(lái)說(shuō)，他們對(duì)此毫不知情，以為自己使用的是手機(jī)原生應(yīng)用。

下面就跟著我一步一步來(lái)使用Cordova打包您的前端項(xiàng)目吧。

1. 在電腦上安裝nodejs，把安裝后的目錄加入到Path環(huán)境變量中去。

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

3. 創(chuàng)建一個(gè)新的文件夾，然后進(jìn)入該文件夾，創(chuàng)建一個(gè)新的Cordova項(xiàng)目。命令行：

cordova create JerryUI5HelloWorld

于是一個(gè)新的Cordova項(xiàng)目被自動(dòng)創(chuàng)建出來(lái)了。里面包含很多子文件夾。

Platforms文件夾是空的，因?yàn)榇藭r(shí)我們尚未添加該Cordova項(xiàng)目支持的移動(dòng)平臺(tái)。

4. 假設(shè)我們想打包成一個(gè)可以安裝到Android平臺(tái)的應(yīng)用，那么得為該Cordova項(xiàng)目添加對(duì)Android平臺(tái)的支持。使用命令行添加：cordova platform add android

命令行執(zhí)行完畢后，我們敬如platforms文件夾，發(fā)現(xiàn)多了一個(gè)android文件夾，里面多出很多文件夾和資源。這些自動(dòng)生成的東西都是最后打包生成安卓應(yīng)用APK文件所必須的。

如果一切正常，我們會(huì)得到下面的目錄結(jié)果。

5. www文件夾下有個(gè)自動(dòng)生成的index.html文件。我們用命令行cordova prepare, 這個(gè)index.html會(huì)自動(dòng)被拷貝到文件夾platformsandroidassetswww下面。這揭示了Cordova使用的一個(gè)最佳實(shí)踐：我們所有的前端開發(fā)，都是直接在Cordova項(xiàng)目文件根目錄的www文件夾內(nèi)進(jìn)行。開發(fā)結(jié)束后，使用cordova prepare，根目錄的www文件夾里的資源會(huì)自動(dòng)被拷貝到該項(xiàng)目支持的移動(dòng)平臺(tái)對(duì)應(yīng)的文件夾內(nèi)，在我的例子里是platformsandroidassetswww。

一切就緒了?，F(xiàn)在使用命令行cordova compile進(jìn)行打包，安卓應(yīng)用的APK文件就生成在文件夾platforms/android/build/output/apk里了。

注意cordova compile這個(gè)命令需要您本地安裝Gradle，如果安裝，會(huì)遇到下列錯(cuò)誤消息：

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。

我沒(méi)有選擇安裝龐大的Android Studio，而是下載了gradle的二進(jìn)制版本，將其加入到Path環(huán)境變量中即可。

將APK安裝到您的手機(jī)上，執(zhí)行，您會(huì)看到下列這個(gè)默認(rèn)的界面。這其實(shí)是Cordova項(xiàng)目創(chuàng)建后生成的缺省的index.html打包安裝到手機(jī)后運(yùn)行的效果。

剩下的事情就很容易了，把您的前端應(yīng)用的所有資源全部拷貝到Cordova項(xiàng)目文件根目錄下的www文件夾里，然后執(zhí)行cordova prepare, 將這些資源自動(dòng)同步到文件夾platformsandroidassetswww下面，再次執(zhí)行命令行cordova compile重新生成APK文件即可。

如果沒(méi)有Android手機(jī)，也可以用Android Studio里提供的模擬器來(lái)測(cè)試。

在Android Virtual Device Manager里創(chuàng)建一個(gè)新的虛擬設(shè)備：

然后使用命令行將cordova compile生成的APK文件安裝到模擬器上：

adb install j.apk

現(xiàn)在就能在Android模擬器里使用您的前端應(yīng)用通過(guò)Cordova打包生成的應(yīng)用了。