如何从头开始在Windows中使用Cordova为Android创建混合移动应用程序 _Web开发

本文概述

1.安装所需的工具
2.在Node.js中安装Cordova
3.创建你的第一个项目
4.为你的项目添加平台
5.构建和测试
附加功能

Cordova是一个使用HTML5, CSS和Java脚本构建本机移动应用程序的平台。通常在Node.js上运行的命令行中使用Cordova, 而NPM上可用。从技术上讲, Cordova应用程序的用户界面实际上是一个WebView, 它占据整个屏幕并在本机Container中运行。因此, 它是本机操作系统(即默认浏览器)使用的同一Web视图。使用Cordova, 我们可以通过由你构建并由cordova的网络视图包含的Web应用程序, 通过著名的Cordova插件使用Javascript访问Mobile Operative System的本机功能(例如对话框, 文件系统, 摄像机等)。
在本文中, 你将学习如何从头开始在Windows环境中实现cordova应用程序以及如何在Android设备中部署应用程序。
1.安装所需的工具你需要安装3个工具才能在Windows中创建你的第一个cordova应用程序：

Java开发套件(JDK)：我们需要在计算机中安装Java开发套件。
Android Studio和Android SDK：尽管我们不会使用Android Studio, 但建议下载包含Android Studio和SDK的完整程序包, 但此SDK包括构建工具, AVD Manager和SDK Manager。安装文件大小约为1.6 GB。
适用于Windows的Node.js：为你的Node.js平台下载具有系统体系结构(x64或x86)的预构建安装程序。安装程序可以是MSI或EXE文件。

由于安装这些工具均不需要任何特殊配置, 而仅需遵循系统中的安装向导, 因此请小心安装并在安装完所有组件后继续执行步骤2。如果要验证是否正确安装了所有内容, 则可以检查安装目录：
JDK安装
找到安装文件夹(通常是), 并检查jdk [version]文件夹是否存在：

如何从头开始在Windows中使用Cordova为Android创建混合移动应用程序

文章图片
此外, 还需要存在JAVA_HOME环境变量。如果它不是自动创建的, 则需要创建它。有了JDK安装路径(末尾带有/ bin)后：

右键单击桌面上的我的电脑图标, 然后选择属性。
单击高级选项卡, 然后单击环境变量按钮。
在系统变量下, 单击新建。
输入变量名称为JAVA_HOME。
输入变量值作为Java开发工具包的安装路径(在本示例中为C：\ Program Files \ Java \ jdk1.8.0_111 \ bin)。
单击确定。
单击” 应用更改” 。

Android SDK
在Windows搜索栏中输入％appdata％或按WIN + R, 打开AppData文件夹：

文章图片
然后导航到Local文件夹, 然后android文件夹应该存在, 并且内部应该是sdk文件夹, sdk文件夹应该具有以下内容(或类似内容)：

文章图片
Node.js
要检查node.js是否已正确安装, 在开始菜单中应该有一个名为Node.js Command Prompt可执行文件的直接访问：

文章图片
该可执行文件与Windows的cmd.exe相同, 但是它运行以下命令来启动：C：\ Windows \ System32 \ cmd.exe / k” C：\ Program Files \ nodejs \ nodevars.bat” 。因此, 如果可执行文件出于某些特殊原因, 则可以执行前面的命令以在cmd窗口中启动。 Node控制台应如下所示：

文章图片
稍后, 你将在此控制台中运行每个节点和cordova命令。
2.在Node.js中安装Cordova 【如何从头开始在Windows中使用Cordova为Android创建混合移动应用程序】继续安装Cordova, 在Node.js命令提示符中执行以下命令：

npm install -g cordova

由于cordova将被全局安装, 因此你可以从控制台中的任何位置执行命令。安装完成后, 请验证执行的cordova版本：

cordova -vREM or the long versioncordova --version

这将在控制台中生成以下输出(请注意, cordova版本可能有所不同)：

文章图片
3.创建你的第一个项目现在可以使用cordova CLI了, 我们可以从创建项目开始。在控制台上导航到要使用CD命令存储所有cordova项目的文件夹, 在这种情况下, 该文件夹将位于Desktop中, 并且名称为dev-desktop：

cd C:\Users\sdkca\Desktop\dev-desktop

使用cordova create命令继续创建项目, 该命令具有以下结构：

cordova create < PROJECT_FOLDER_NAME> [PACKAGE NAME OF THE APP] [App Name]

在此示例中, 我们的测试应用将是沙箱, 我们将执行以下命令来创建它(根据你的名称更改程序包名称)：

cordova create sandbox com.mycompany.sandbox Sandbox

项目的创建不需要花费太多时间, 该命令将创建一个名称为sandbox的文件夹, 并且Cordova项目的内容将位于其中。现在, 使用以下命令导航到沙箱文件夹：

cd sandbox

通过此指令, 你可以在C：\ Users \ sdkca \ Desktop \ dev-desktop \ sandbox中找到控制台, 仅当你使用控制台将其放置在项目文件夹中时, 才应执行项目的每个cordova命令。
4.为你的项目添加平台你的cordova项目已成功创建, 但是如果没有任何项目, 它将无法在任何平台上运行。你可以使用cordova platform命令将第一个平台添加到你的应用程序中, 在这种情况下, 正如本文所述, 我们将创建要在Android中使用的第一个应用程序, 因此, 我们将使用来添加android平台。以下命令：

cordova platform add android --save

控制台中的输出将类似于：

文章图片
安装平台后, 你的项目结构应类似于：

文章图片
重要说明：如图中所示, 对于最新版本的cordova, android版本目标是24。这意味着你需要检查android的SDK Manager中是否已安装此API版本。
打开SDK管理器(通常位于Android SDK文件夹中, 即C：\ Users \ < YOUR-USERNAME> \ AppData \ Local \ Android \ sdk \ SDK Manager.exe)并验证已安装的版本：

文章图片
如果未安装目标版本, 请继续安装它, 然后等待安装完成。
5.构建和测试你可以通过两种方式部署cordova应用程序：
仿真器
要在Android模拟器中模拟你的cordova应用, 你需要首先配置模拟器。打开AVD(Android虚拟设备)管理器(通常位于Android SDK文件夹中, 即C：\ Users \ < YOUR-USERNAME> \ AppData \ Local \ Android \ sdk \ AVD Manager.exe), 并创建一个新的没有任何创建。
在继续创建仿真器之前, 我们建议你(最好说, 你需要)安装英特尔HAXM。这可以由Android SDK管理器(C：\ Users \ < 你的用户名> \ AppData \ Local \ Android \ sdk \ SDK Manager.exe)自动安装：

文章图片
如果你已经安装了英特尔HAXM, 则可以继续创建具有有效目标(安装了Android的现有API版本, 即Android API 19-4.4.2)和自定义名称的新设备。以下配置显示了一个模拟器, 该模拟器具有Android 7(API 24), Windows中推荐的768MB RAM和一个低分辨率设备, 以便使其在我们的计算机中更快地运行(如果你的计算机很棒, 请更改分辨率)。

文章图片
如果你有视频卡, 请选中” 使用主机GPU” 选项。最后, 单击保存以创建仿真器, 创建仿真器后将其启动。我们的Android 7模拟器看起来像：

文章图片
让仿真器窗口处于活动状态, 并作为最后一步, 构建应用程序, 并使用以下命令将仿真器设置为目标：

cordova run android --emulator

如果执行该命令而仿真器未打开, 则它将自动启动AVD Manager中可用的默认仿真器(因此, 为了延长开发时间, 请打开仿真器:-))。应用程序的构建将开始, 你的应用程序应在模拟器中启动, 从而产生：

文章图片
很简单, 对不对？
设备
要将应用程序部署到设备上, 你需要(值得冗余)：

具有Android的移动设备(显然至少具有cordova应用所需的最低Android版本, 通常为Android 4.1.2 API 16)。
设备的USB兼容电缆。

注意：某些设备需要驱动程序才能允许设备和计算机之间的连接(例如, 对于Moto G X1040, 你需要在计算机上安装Motorola驱动程序)。你可以尝试不使用驱动程序, 但是如果控制台仍然显示错误消息” 找不到设备” 并且你的设备已连接, 请安装正确的驱动程序。
使用USB电缆将设备连接到计算机, 然后执行以下命令来构建应用并在设备中执行该应用：

cordova run android --device

构建过程将开始, 该应用程序将部署在你的设备上。恭喜, 你已经创建并部署了第一个Cordova应用程序, 我们建议你最终阅读Cordova文档以获取更多信息。
附加功能有一些技巧可以使你的开发经验更好：
使用Chrome调试index.html
众所周知, 无法在设备中直接调试cordova页面。尽管使用Android Studio(本机android应用程序)对android应用程序进行调试非常容易, 但是如果你使用的工具不正确, 则在cordova应用程序上进行调试可能会成为一个噩梦。你可以使用Google Chrome浏览器以在浏览器上调试网站的方式来调试cordova应用。
在Cordova中调试本机代码
如果你正在使用本机代码(在这种情况下使用Android)创建插件或类似的东西, 则可以使用Android SDK的ADB实用工具进行调试。 ADB(Android调试桥)是Google的Android SDK附带的命令行实用程序。 ADB可以通过USB通过计算机控制你的设备, 来回复制文件, 安装和卸载应用程序, 运行Shell命令等等。
编码愉快！