cordova - Cordova第一个应用 - cordova教程 , 学习cordova , cordova android , cordova ios



  • 在上一个教程中,我们学习了如何安装Cordova 并设置了环境。在这一个节中我们创建第一个混合Cordova应用程序。
  • cordova教程 - cordova - 
学习cordova - android apache cordova -  apache cordova代码- apache cordova的例子
Wikitechy cordova tutorial tags - apache cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova下载 , apache cordova是什么 , cordova plugin开发 , apache cordova教程 , cordova 教程 , cordova插件开发 , 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 
Clicking "Copy Code" button will copy the code into the clipboard - memory. Please paste(Ctrl+V) it in your destination. The code will get pasted. Happy coding from Wikitechy cordova tutorial team
  • 您也可以从项目中删除使用的平台 −

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

第3步 - 构建和运行

  • 在这一步中,我们正在为应用程序指定平台,所以我们可以在移动设备或模拟器中运行它。

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

  • 执行上面的命令后,它会自动下载相关依赖包,需要等一段时间(根据你的网络带宽决定时间)。注:每次修改HMTL代码最好重新构建过代码。
 windows

学习cordova - cordova教程 - windows - cordova示例 - cordova程序

  • 现在我们可以运行应用程序。如果使用的是默认的模拟器,应该使用 -

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

 emulate android

学习cordova - cordova教程 - 模仿android - cordova示例 - cordova程序

  • 如上提示,需要更新模拟器到最新的 android-23 版本,在 Android Studio 中配置并更新对应的 SDK 版本后再次执行,它将启动模拟器(比较慢,需要点耐心)。如下图:
 emulator tool

学习cordova - cordova教程 - 模拟器工具 - cordova示例 - cordova程序

  • 当仿真器启动后,可使用仿真器或真实设备应调试使用 -

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

  • 注 - 可以考虑使用 genymotion Android 模拟器,因为它比默认的速度更快,反应更迅速。可以从这里下载。也可以通过启用选项从USB调试,并通过USB连接线将其连接到您的电脑使用真实的设备进行测试。 对于某些特定设备还需要安装USB驱动程序。
  • 打开 Android Studio 导入上面创建成功的工程,运行这个工程,得到结果如下:
  • 当我们运行应用程序,将在我们指定平台上安装它。如果一切都没有错误并执行完成后,输出显示的默认启动应用程序的屏幕如下所示。
 apache cordova

学习cordova - cordova教程 - apache cordova - cordova例子 - 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.

Wikitechy cordova tutorial tags - apache cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova下载 , apache cordova是什么 , cordova plugin开发 , apache cordova教程 , cordova 教程 , cordova插件开发 , cordova菜鸟教程 , 菲律宾cordova岛 , cordova 持续定位

解决参考:配置环境变量

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

Wikitechy cordova tutorial tags - apache cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova下载 , apache cordova是什么 , cordova plugin开发 , apache cordova教程 , cordova 教程 , cordova插件开发 , cordova菜鸟教程 , 菲律宾cordova岛 , cordova 持续定位

附上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 - Apache cordova - Plug-in class mappings: :

  • Android: res/xml/plugins.xml
  • iOS: www/Cordova.plist
  • BlackBerry: www/plugins.xml
  • cordova教程 - cordova - 
学习cordova - cordova plugin -  apache cordova代码- apache cordova的例子

    cordova教程 - cordova - 
学习cordova - cordova-android-native-code-api.png -  apache cordova代码- apache cordova的例子

    cordova教程 - cordova - 
学习cordova - android cordova plugin example html js -  apache cordova代码- apache cordova的例子


    wikitechy provides you the following points such as cordova , cordova教程 , 学习cordova , cordova android , cordova ios , cordova plugin add , cordova android studio , phonegap android , phonegap ios , cordova api , cordova-android , phonegap cordova , cordova plugin , cordova下载 , apache cordova是什么 , cordova cli , cordova plugin开发 , apache cordova教程 , cordova 教程 , vue cordova , ngcordova , ionic cordova , cordova plugin file , cordova 安装 , ionic 会取代cordova么 , cordova怎么样 , cordova插件开发 ,cordova菜鸟教程 , cordova react , cordova ionic vuejs , 菲律宾cordova岛 , cordova 持续定位 , phonegap , cordoba , cordova plugins , cardova , apache cordova , cordova phonegap , ionic cordova phonegap , apache cordova alternatives , cordova for visual studio , best ide for cordova development , create cordova plugin android , cordova ios 4 , apache cordova download , cordova build command , cordova web support , cordova webview android , how to install cordova , phonegap developer , apache cordova ionic , cordova command

    Related Searches to Cordova第一个应用