炫意html5
最早CSS3和HTML5移动技术网站之一

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代码最好重新构建过代码。
现在我们可以运行应用程序。如果使用的是默认的模拟器,应该使用 –
D:\worksp\cordova\CordovaProject> cordova emulate android

如上提示,需要更新模拟器到最新的 android-23 版本,在 Android Studio 中配置并更新对应的 SDK 版本后再次执行,它将启动模拟器(比较慢,需要点耐心)。如下图:
当仿真器启动后,可使用仿真器或真实设备应调试使用 –
D:\worksp\cordova\CordovaProject> cordova run android 

注 – 可以考虑使用 genymotion Android 模拟器,因为它比默认的速度更快,反应更迅速。可以从这里下载。也可以通过启用选项从USB调试,并通过USB连接线将其连接到您的电脑使用真实的设备进行测试。 对于某些特定设备还需要安装USB驱动程序。

打开 Android Studio 导入上面创建成功的工程,运行这个工程,得到结果如下:

当我们运行应用程序,将在我们指定平台上安装它。如果一切都没有错误并执行完成后,输出显示的默认启动应用程序的屏幕如下所示。

可能出错信息:

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应用。

炫意HTML5 » Cordova第一个应用

Java基础教程Android基础教程