个性化阅读
专注于IT技术分析

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

本文概述

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应用程序:

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

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

JDK安装

找到安装文件夹(通常是), 并检查jdk [version]文件夹是否存在:

Java安装路径

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

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

Android SDK

在Windows搜索栏中输入%appdata%或按WIN + R, 打开AppData文件夹:

Windows启动appdata文件夹

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

Android SDK文件夹内容

Node.js

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

Node.js开始菜单窗口

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

Node.js命令提示符Windows终端

稍后, 你将在此控制台中运行每个节点和cordova命令。

2.在Node.js中安装Cordova

继续安装Cordova, 在Node.js命令提示符中执行以下命令:

npm install -g cordova

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

cordova -v
REM or the long version
cordova --version

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

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

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

Android Cordova平台添加示例

安装平台后, 你的项目结构应类似于:

Cordova proyect结构

重要说明:如图中所示, 对于最新版本的cordova, android版本目标是24。这意味着你需要检查android的SDK Manager中是否已安装此API版本。

打开SDK管理器(通常位于Android SDK文件夹中, 即C:\ Users \ <YOUR-USERNAME> \ AppData \ Local \ Android \ sdk \ SDK Manager.exe)并验证已安装的版本:

Android SDK Manager Windows

如果未安装目标版本, 请继续安装它, 然后等待安装完成。

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)自动安装:

Android AVD Manager Haxm英特尔

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

Android AVD示例

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

Android模拟器7

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

cordova run android --emulator

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

Android Build Emulator Cordova

很简单, 对不对?

设备

要将应用程序部署到设备上, 你需要(值得冗余):

  • 具有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命令等等。

编码愉快!

赞(0) 打赏
未经允许不得转载:srcmini » 如何从头开始在Windows中使用Cordova为Android创建混合移动应用程序
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏