天天看點

使用Cordova将您的前端JavaScript應用打包成手機原生應用

假設我用JavaScript和HTML開發了一個前端應用,我想把該應用打包成能直接在手機上安裝和運作(不通過浏覽器)的原生應用,例如像下面這樣。對應用的使用者來說,他們得到的使用者體驗和真正的用Android Studio或者XCode開發的原生應用完全一緻。

這是怎麼做到的?

使用Cordova将您的前端JavaScript應用打包成手機原生應用

答案是使用Apache的開源架構,Cordova。

使用Cordova将您的前端JavaScript應用打包成手機原生應用

以Android架構為例,Cordova能将您的前端應用裡的JavaScript和HTML資源打包成Android原生的apk檔案,可以直接在安卓手機上安裝。運作時,這些JavaScript和HTML直接運作在Cordova提供的一個嵌入式的WebView控件裡,對于手機使用者來說,他們對此毫不知情,以為自己使用的是手機原生應用。

使用Cordova将您的前端JavaScript應用打包成手機原生應用

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

1. 在電腦上安裝nodejs,把安裝後的目錄加入到Path環境變量中去。

使用Cordova将您的前端JavaScript應用打包成手機原生應用

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

使用Cordova将您的前端JavaScript應用打包成手機原生應用

3. 建立一個新的檔案夾,然後進入該檔案夾,建立一個新的Cordova項目。指令行:

cordova create JerryUI5HelloWorld

使用Cordova将您的前端JavaScript應用打包成手機原生應用

于是一個新的Cordova項目被自動建立出來了。裡面包含很多子檔案夾。

使用Cordova将您的前端JavaScript應用打包成手機原生應用

Platforms檔案夾是空的,因為此時我們尚未添加該Cordova項目支援的移動平台。

4. 假設我們想打包成一個可以安裝到Android平台的應用,那麼得為該Cordova項目添加對Android平台的支援。使用指令行添加:cordova platform add android

使用Cordova将您的前端JavaScript應用打包成手機原生應用

指令行執行完畢後,我們敬如platforms檔案夾,發現多了一個android檔案夾,裡面多出很多檔案夾和資源。這些自動生成的東西都是最後打包生成安卓應用APK檔案所必須的。

使用Cordova将您的前端JavaScript應用打包成手機原生應用

如果一切正常,我們會得到下面的目錄結果。

使用Cordova将您的前端JavaScript應用打包成手機原生應用

5. www檔案夾下有個自動生成的index.html檔案。我們用指令行cordova prepare, 這個index.html會自動被拷貝到檔案夾platformsandroidassetswww下面。這揭示了Cordova使用的一個最佳實踐:我們所有的前端開發,都是直接在Cordova項目檔案根目錄的www檔案夾内進行。開發結束後,使用cordova prepare,根目錄的www檔案夾裡的資源會自動被拷貝到該項目支援的移動平台對應的檔案夾内,在我的例子裡是platformsandroidassetswww。

使用Cordova将您的前端JavaScript應用打包成手機原生應用

一切就緒了。現在使用指令行cordova compile進行打包,安卓應用的APK檔案就生成在檔案夾platforms/android/build/output/apk裡了。

使用Cordova将您的前端JavaScript應用打包成手機原生應用

注意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。

使用Cordova将您的前端JavaScript應用打包成手機原生應用

我沒有選擇安裝龐大的Android Studio,而是下載下傳了gradle的二進制版本,将其加入到Path環境變量中即可。

使用Cordova将您的前端JavaScript應用打包成手機原生應用

将APK安裝到您的手機上,執行,您會看到下列這個預設的界面。這其實是Cordova項目建立後生成的預設的index.html打包安裝到手機後運作的效果。

使用Cordova将您的前端JavaScript應用打包成手機原生應用

剩下的事情就很容易了,把您的前端應用的所有資源全部拷貝到Cordova項目檔案根目錄下的www檔案夾裡,然後執行cordova prepare, 将這些資源自動同步到檔案夾platformsandroidassetswww下面,再次執行指令行cordova compile重新生成APK檔案即可。

如果沒有Android手機,也可以用Android Studio裡提供的模拟器來測試。

在Android Virtual Device Manager裡建立一個新的虛拟裝置:

使用Cordova将您的前端JavaScript應用打包成手機原生應用

然後使用指令行将cordova compile生成的APK檔案安裝到模拟器上:

adb install j.apk

使用Cordova将您的前端JavaScript應用打包成手機原生應用

現在就能在Android模拟器裡使用您的前端應用通過Cordova打包生成的應用了。

使用Cordova将您的前端JavaScript應用打包成手機原生應用
使用Cordova将您的前端JavaScript應用打包成手機原生應用

繼續閱讀