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