CordovaCordova入门


备注

Apache Cordova用于创建HTML,CSS和JS的移动应用程序。

Apache Cordova针对具有一个代码库的多个平台。

Apache Cordova是免费和开源的。

Cordova将您的HTML / JavaScript应用程序包装到一个本机容器中,该容器可以访问多个平台的设备功能。这些功能通过统一的JavaScript API公开,允许您轻松编写一组代码,以便针对当今市场上的几乎所有手机或平板电脑,并发布到他们的应用商店。

谁可以使用Apache Cordova

  1. 移动开发人员,希望在多个平台上扩展应用程序,而无需使用每个平台的语言和工具集重新实现它。

  2. 一个Web开发人员,并希望部署一个打包在各种应用程序商店门户中分发的Web应用程序。

  3. 移动开发人员有兴趣将本机应用程序组件与可以访问设备级API的WebView(特殊浏览器窗口)混合,或者如果要在本机和WebView组件之间开发插件接口。

Cordova简介: https //cordova.apache.org/docs/en/latest/

创建应用程序

初步

如果您还没有安装Cordova cli工具。
$ npm install -g cordova

导航到所需的工作文件夹。
$ cd /path/to/coding/folder

创建应用程序

创建一个新的应用程序
$ cordova create <appProjectName> <appNameSpace> <appName>

在本例中,我们将创建一个“HelloWorld”应用程序:
$ cordova create helloWorld com.example.helloworld HelloWorld

添加平台和插件

平台

首先,导航到应用程序的文件夹。
$ cd <appName>

添加您要构建的平台。可以在此处找到支持的平台列表。
$ cordova platform add <platformList>

我们将添加Android,iOS和浏览器平台。使用空间分隔一次添加多个平台。 browser 平台将在浏览器内测试中派上用场。
使用--save 参数会将平台列表保存到Cordova的config.xml 文件中。

$ cordova platform add android ios browser --save

有关platform 命令的大量选项列表可以在cordova文档中找到。

插件

Cordova插件可以让您访问设备硬件,操作系统特定功能和更多功能。
plugin 命令的结构与平台的结构相同

$ cordova plugin add <plugins.value>

我们将添加cordova文件插件(便于设备存储访问)和相机插件,可以访问设备的相机来制作照片和视频。

$ cordova plugin add cordova-plugin-file cordova-plugin-camera --save

请记住 :使用--save 参数将您的设置写入config.xml 文件。在另一台机器上轻松重建项目非常有用。

Cordova拥有出色的插件搜索页面设置,方便您使用。你可以在这里找到它。

运行您的应用程序

运行应用程序非常简单。只需使用以下命令即可。
$ cordova run <platform name>

对于我们的示例,我们将在浏览器中运行我们的测试应用程序。
$ cordova run browser

这将打开您的默认浏览器,您的应用程序已准备好进

在Windows上安装Cordova

首先,安装Java SE Development Kit

这可以像下载,双击下载的文件以及遵循安装说明一样简单。对于安装Java SE Development Kit,请从官方网站下载。 Java SE开发工具包。下载

JDK安装完成后,您需要添加新的JAVA_HOME 系统变量以及JDK的路径

PATH 系统变量旁边添加到JDK的bin dirrectory的路径

现在您可以测试安装。打开命令提示符并使用命令

javac -version
 

如果你看到版本号,你就做对了!

现在使用Android Studio安装Android SDK工具

我推荐安装Android Studio,因为目前它是快速,轻松地安装Android开发所有必要的东西的最佳方式。事项清单包括:

  • Android开发工具包(Android SDK,Android SDK Manager,Android SDK平台工具,Android SDK构建工具)
  • 具有大量Android配置的Android Emulator
  • IDE(适用于Java上的Android开发)
  • 摇篮
  • 如果你正在学习Java,那将非常有用,并且将来想要开始在Java上开发Android

因此,请从官方网站developer.android.com下载Android Studio

Android Studio安装非常简单,您只需按照说明操作即可。但是你应该注意Android SDK安装位置

在此处输入图像描述

Android Studio安装完成后,您需要添加新的ANDROID_HOME 系统变量以及Android SDK 路径

在此处输入图像描述

现在,您需要将Android SDK和Android SDK工具添加到PATH系统变量。在列表中,用户变量选择PATH并单击“编辑”按钮。在字段变量值的末尾,添加分号并跟随路径:

C:\Users\User\AppData\Local\Android\sdk;C:\Users\User\AppData\Local\Android\sdk\tools;C:\Users\User\AppData\Local\Android\sdk\platform-tools;
 

在此处输入图像描述

现在您可以测试安装。打开命令提示符并使用命令

adb version
 

这应该显示Android Debug Bridge的版本。如果你看到版本号,你就做对了!

现在再次打开命令提示符并使用命令

android
 

用于打开Android SDK Manager

在此处输入图像描述

在Android SDK Manager中选择安装

  • Android SDK工具
  • Android SDK平台工具
  • Android SDK Build-tools
  • Android SDK Build-tools
  • Android 6.0(API 23)
  • Android 5.1.1(API 22)
  • Android 5.0.1(API 21)
  • Android 4.2.2(API 17)
  • GPU调试工具
  • Android支持存储库
  • Android支持库
  • Google Play服务
  • Google Repository
  • 谷歌USB驱动程序
  • Intel x86仿真器加速器(HAXM安装程序)

然后单击“安装”按钮

注意:

Cordova Android支持的API级别

了解Android API级别

Android平台/ API版本分发

安装Cordova

打开命令提示符并使用命令安装Cordova

npm install -g cordova
 

安装或设置

要安装cordova命令行工具,请按照下列步骤操作:

  1. 下载并安装Node.js.在安装时,您应该能够在命令行上调用nodenpm

    • 要查看是否已安装Node,请打开CLI(命令行界面)。对于Windows,它是Windows命令提示符,对于MAC,它是终端。类型:

      $ node -v

      这应该打印一个版本号,所以你会看到像这样的v0.10.35。如果未安装Node,请找到您的操作系统并按照此处的说明操作: https//nodejs.org/en/download/package-manager/

  2. (可选)下载并安装git客户端 (如果您还没有)。安装之后,您应该能够在命令行上调用git 。 CLI使用它来使用git repo的url引用资源时使用它来下载资产。

  3. 使用Node.js的npm实用程序安装cordova模块。 npm实用程序将自动下载cordova模块。

在OS X和Linux上:

 $ sudo npm install -g cordova
 

在Windows上:

C:\>npm install -g cordova
 

上面的-g标志告诉npm全局安装cordova 。否则,它将安装在当前工作目录的node_modules子目录中。

安装之后,您应该能够在命令行上运行cordova而不需要参数,它应该打印帮助文本。

版本

最新Cordova版本:

Cordova 6.1.0 - https://cordova.apache.org/news/2016/03/23/tools-release.html Cordova 6.0.0 - https://cordova.apache.org/news/2016/01/28 /tools-release.html

最新的Android平台和iOS平台

Cordova Android 5.2.2 - https://cordova.apache.org/announcements/2016/07/02/android-5.2.0.html Cordova iOS 4.2.1 - https://cordova.apache.org/announcements/2016 /07/11/cordova-android-5.2.1.html