惊蛰

外观

使用Cordova运行项目到android

约 2321 字大约 8 分钟

2025-06-25

认识 Cordova

关于 Cordova ，官网介绍如下：

Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies - HTML5, CSS3, and JavaScript for cross-platform development. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's capabilities such as sensors, data, network status, etc.

Cordova 官网：https://cordova.apache.org/

环境配置

截图不够清晰，所以本文所有的版本号以文字形式展现

检查 Node.js 和 npm 是否安装

按 win + r 打开运行窗口，输入 cmd 按回车，打开运行窗口。

分别输入 node -v 和 npm -v ：

C:\Users\Administrator>node -v
v18.14.0

C:\Users\Administrator>npm -v
9.3.1

出现版本号表示本机已经安装了Node.js 和 npm。

安装 cordova

在运行窗口输入 npm install -g cordova 安装 cordova：

npm install -g cordova

输入 cordova -v 检查是否正确安装：

C:\Users\Administrator>cordova -v
12.0.0 (cordova-lib@12.0.1)

-g 是全局安装

cordova 对 node.js 版本有要求，具体信息查看：Installation

工具要求

使用 cordova 运行项目到 Android 需要以下软件和工具：

The Required Software & Tools：

- JDK
- Gradle
- Android Studio
- SDK

下面我们将分别来安装。

JDK 的下载安装、配置环境变量

官网下载链接： Java Downloads

早期版本可能需要登录账号，新版本不用登录账号。我用的是 JDK21 ：Java Downloads | Oracle 。

alt text

alt text

.exe 文件下载完成后直接双击安装即可。

安装时可以修改安装路径。

JDK 安装完成以后需要配置环境变量。

以 win10 + jdk21 为例：

  • 按 win+s 输入 env，按回车，进入环境变量页面 alt textalt text

  • 点击“环境变量”，系统变量 alt text

  • 如果是第一次进来，点“新建”，变量名 JAVA_HOME，变量值是你的 jdk 安装的路径

    很多教程提到要配置 CLASSPATH 变量，但 java 9 之后应该就不用配置 CLASSPATH 了

    alt textalt textalt text

  • 修改 PATH：新建两条路径 %JAVA_HOME%\bin 、%JAVA_HOME%\jre\bin 。

    java 9 之后也只需配 %JAVA_HOME%\bin

    alt text

  • 配置完成后依次点确定， 打开 cmd ，输入 java -version ，出现版本号则配置成功

C:\Users\Administrator>java -version
java version "21.0.1" 2023-10-17 LTS
Java(TM) SE Runtime Environment (build 21.0.1+12-LTS-29)
Java HotSpot(TM) 64-Bit Server VM (build 21.0.1+12-LTS-29, mixed mode, sharing)

提示

更详细的配置环境变量教程：Windows 10 配置 Java 环境变量 、 Java JDK 安装与环境变量配置、安装 JDK

Gradle 的安装、配置环境变量

Gradle 直接下载链接: version=8.8

下载完是一个压缩包，放到任意位置解压（我放到了 G:\ ） alt text

解压之后需要配置 环境变量。

  • 和 jdk 一样，进入 环境变量|系统变量 后，新建 GRADLE_HOME ，输入存放的位置：

    alt text

  • 然后在 PATH 中新建 %GRADLE_HOME%\bin

    alt text

  • 配置完成后依次点确定， 打开 cmd，输入 gradle -v 出现版本号则配置成功

C:\Users\Administrator>gradle -v

------------------------------------------------------------
Gradle 8.8
------------------------------------------------------------

Build time:   2024-05-31 21:46:56 UTC
Revision:     4bd1b3d3fc3f31db5a26eecb416a165b8cc36082

Kotlin:       1.9.22
Groovy:       3.0.21
Ant:          Apache Ant(TM) version 1.10.13 compiled on January 4 2023
JVM:          21.0.1 (Oracle Corporation 21.0.1+12-LTS-29)
OS:           Windows 10 10.0 amd64

C:\Users\Administrator>

详细教程：gradle 的安装与使用

Android Studio 的安装、配置环境变量

相关信息

官网：Android Studio 直接下载最新版就行

安装包下载完成后双击安装，安装时可以修改路径。

如果以前安装过 Android Studio，建议卸载并删除原有配置文件。

这个 gif 有原来的 Android Studio 的 sdk 缓存。

alt text

安装完成以后打开 Android Studio，根据软件提示一步步安装并设置 Android SDK packages

这个 gif 是没有 sdk 缓存的视频。

alt text

SDK 的安装、配置环境变量

配置链接：sdk-packages

现在没有单独的 SDK 下载安装包了，下载包都在 Android Studio 里。安装 sdk 分为 5 步：

  • Installing SDK Platform：第一次安装 Android Studio 或者卸载干净之后重新安装，会提示必须安装 sdk，根据提示安装即可，因为cordova-android@12.0.0, the highest supported SDK is 33.，所以我们要选中 Android13 API Level33
  • Installing Android SDK Build-Tools： cordova-android@12.0.0, the highest supported SDK is 33.
  • Installing SDK Command-line Tools (latest)：Check Show Package Details，Expand Android SDK Command-line Tools (latest)，Check Android SDK Command-line Tools (latest)，Click Apply
  • Installing Android SDK Platform-Tools：默认已安装，没有安装的话按照官方文档安装即可。
  • Installing Android Emulator：默认已安装，没有安装的话按照官方文档安装即可。

最后配置 ANDROID_HOME 的环境变量：Android_home 配置环境变量

配置完成后依次点确定， 打开 cmd ，输入 adb version 出现版本号则配置成功。

C:\Users\Administrator>adb version
Android Debug Bridge version 1.0.41
Version 35.0.1-11580240

Cordova 创建并运行 Android 项目

创建项目并添加插件：

配置完上述所有环境变量后，我们就可以用 Cordova 创建项目并运行了！🎉

打开 Creating an App，按照步骤：

  • 在代码目录下输入 cmd ，然后在控制台输入 cordova create hello com.example.hello HelloWorld

  • cd hello

  • cordova platform add android

  • cordova platform ls

  • cordova requirements

这时可能会报错

Android target: not installed
Command failed with exit code 1: avdmanager list target

原因是没有安装模拟器，不用管它（我已经安装了模拟器甚至打开了模拟器，但是检查的时候仍然提醒没有，可能是版本的原因）

alt text

alt text

alt text

运行到真机或者模拟器

一定要先打开真机或者模拟器

  • Build the App： cordova build （为所有平台 build）、 cordova build android （只为 Android build）
  • cordova emulate android // 这句可以不运行，运行的话报错也无所谓，因为 Running cordova emulate will also prepare, rebuild, and redeploy the latest app to the emulator.
  • cordova run android // 运行这一句之前一定要先打开真机或者模拟器！！ 如果有打开的模拟器，就运行到模拟器，如果连接的有真机（打开了 usb 调试），就运行到真机。

发送 build 生成的 apk

暂时没有数据线连接真机的话，也可以把 build 生成的 .apk 发送到手机自行安装。

alt text

以下是运行到模拟器的示例（也可以不开 Android Studio，直接运行到真机）：

alt textalt textalt text

后续修改内容

运行成功以后证明项目没有问题，后续修改内容可以在 vscode 中打开进行修改。修改完以后直接运行 cordova run android

如果继续使用模拟器展示修改效果，就保留打开的 Android Studio 和模拟器， cordova run android 会直接运行到模拟器上。

如果后续直接运行到真机，可以直接关闭 Android Studio 和模拟器， cordova run android 会直接运行到真机上。

alt text

命令运行记录如下：