使用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的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: