Cordova第一個應用

在上一個教程中,我們學習瞭如何安裝Cordova 並設置了環境。在這一個節中我們創建第一個混合Cordova應用程序。

第1步 - 創建App

在命令提示符下打開要安裝應用程序的目錄。我們將在桌面上創建它。

D:\worksp\cordova>cordova create CordovaProject io.cordova.hellocordova CordovaApp

  • CordovaProject 是創建應用程序的目錄名。

  • io.cordova.hellocordova 是默認的反向域名值(類似Java包的命名)。如果可能使用自己的域名的值。

  • CordovaApp 是應用程序的標題。

第2步 - 添加平臺

你需要在命令提示符下,打開您的項目目錄。在我們的例子是CordovaProject。您應該只選擇您需要的平臺。爲了能夠使用指定的平臺,你需要安裝特定的平臺SDK。由於我們使用的是Windows開發,我們可以使用下面的平臺。我們還安裝了Android SDK中,所以我們將只針對安裝Android平臺來講解本教程。

D:\worksp\cordova\CordovaProject> cordova platform add android

有時候也可以在Windows操作系統中使用其他平臺。

D:\worksp\cordova\CordovaProject\CordovaProject>cordova platform add wp8

D:\worksp\cordova\CordovaProject\CordovaProject>cordova platform add amazon-fireos

D:\worksp\cordova\CordovaProject\CordovaProject>cordova platform add windows

D:\worksp\cordova\CordovaProject\CordovaProject>cordova platform add blackberry10

D:\worksp\cordova\CordovaProject\CordovaProject>cordova platform add firefoxos 

如果您在Mac上開發,可以使用 −

$ cordova platform add IOS

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos 

您也可以從項目中刪除使用的平臺 −

D:\worksp\cordova\CordovaProject>cordova platform rm android

第3步 - 構建和運行


在這一步中,我們正在爲應用程序指定平臺,所以我們可以在移動設備或模擬器中運行它。

D:\worksp\cordova\CordovaProject> cordova build android

執行上面的命令後,它會自動下載相關依賴包,需要等一段時間(根據你的網絡帶寬決定時間)。注:每次修改HMTL代碼最好重新構建過代碼。
Cordova第一個應用

現在我們可以運行應用程序。如果使用的是默認的模擬器,應該使用 -

D:\worksp\cordova\CordovaProject> cordova emulate android

Cordova第一個應用
如上提示,需要更新模擬器到最新的 android-23 版本,在 Android Studio 中配置並更新對應的 SDK 版本後再次執行,它將啓動模擬器(比較慢,需要點耐心)。如下圖:
Cordova第一個應用

當仿真器啓動後,可使用仿真器或真實設備應調試使用 -

D:\worksp\cordova\CordovaProject> cordova run android 

注 - 可以考慮使用 genymotion Android 模擬器,因爲它比默認的速度更快,反應更迅速。可以從這裏下載。也可以通過啓用選項從USB調試,並通過USB連接線將其連接到您的電腦使用真實的設備進行測試。 對於某些特定設備還需要安裝USB驅動程序。

打開 Android Studio 導入上面創建成功的工程,運行這個工程,得到結果如下:

當我們運行應用程序,將在我們指定平臺上安裝它。如果一切都沒有錯誤並執行完成後,輸出顯示的默認啓動應用程序的屏幕如下所示。

Cordova第一個應用

可能出錯信息:

D:\worksp\cordova\CordovaProject>cordova build android
ERROR building one of the platforms: Failed to find 'ANDROID_HOME' environment v
ariable. Try setting setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to inclu
de path to valid SDK directory.
You may not have the required environment or OS to build this project
Error: Failed to find 'ANDROID_HOME' environment variable. Try setting setting i
t manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to inclu
de path to valid SDK directory.

解決參考:配置環境變量

ANDROID_HOME=E:\Program Files\adt-bundle-windows-x86_64-20131030\sdk
PATH=%PATH%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

附上cordova常用命令列表

命令

說明

cordova create <工程路徑> <包名> <工程名>

創建cordova工程,例如:cordova create helloworld_prj "com.yiibai.helloworld" "helloworld"

cordova build android

給cordova項目添加android平臺。

cordova run android

編譯和運行項目。

cordova install android

將編譯好的應用程序安裝到模擬器上。

cordova plugin add <插件完全限定名>

給項目添加插件。

cordova plugin remove <插件完全限定名>

刪除插件。

cordova plugin list

查看插件列表。

cordova platforms add android 

添加平臺支持。

cordova build android

編譯代碼

cordova emulate android

在模擬器上運行(前提是創建好AVD)

cordova serve android

在瀏覽器運行 

cordova run android

通過USB直接安裝到真機

在我們接下來的教程中,我們將告訴你如何配置Cordova應用。