使用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打包生成的應用了。

這張圖每位程序員應該都深有感觸。

人民心目中的程序員是這樣的：坐在電腦面前噼里啪啦敲著鍵盤，運鍵如飛。

現實中程序員是這樣的：編碼5分鐘，調試兩小時。

今天我要給大家分享一個用WebGL開發的網站，感興趣的朋友可以在Chrome開發者工具里調試它的源碼來學習WebGL。

WebGL(Web Graphics Library)是3D繪圖協議的一種，該技術的特色是將萬能的JavaScript和OpenGL ES 2.0結合在一起，為HTML5的 Canvas提供硬件3D加速渲染。借助WebGL，前端開發人員可以開發出非常專業的3D場景和模型。

今天我要介紹的網站：Legacy Encom Boardroom Visualization就是一個采取JavaScript 加上WebGL開發3D場景和模型的一個典型例子。

網站地址：https://www.robscanlon.com/encom-boardroom/

進入之后，會看到一個炫目的控制臺。左下角的動畫效果很像電影《生化危機》里的DNA雙螺旋模型。屏幕右邊是一個控制臺，你在鍵盤上輸入的字符會有個酷炫的動畫效果：

您可以手動在控制臺里輸入shell命令，比如：

cd wikipedia

ls

以此來瀏覽wikipedia文件夾下的所有內容。或者直接用鼠標左鍵點擊wikipedia這個文件夾：

然后就能進入wikipedia這個文件夾，看到幾個酷炫的3D模型，一個是正在旋轉的地球的3D模型，另一個是不同維度展示的長方體模型。

在Chrome開發者工具的console頁面能看到WebGL相關的輸出。

這個網站的源碼在github：http://github.com/arscan/encom-boardroom

如果大家對WebGL技術感興趣的，不妨去細讀下源代碼：

要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"。

Android JavaScript web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。