srcmini本文概述
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]文件夹是否存在：
此外, 还需要存在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
继续安装Cordova, 在Node.js命令提示符中执行以下命令：
npm install -g cordova由于cordova将被全局安装, 因此你可以从控制台中的任何位置执行命令。安装完成后, 请验证执行的cordova版本：
cordova -v
REM or the long version
cordova --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命令等等。
编码愉快！
评论前必须登录！
注册