cordova跨平台移动应用开发——环境安装-2024年cordova新版

文章共3,431字 · 阅读需要大约12分钟

一键AI生成摘要，助你高效阅读

问答

IT晓夏

1566人浏览 · 2024-03-18 23:36:24

IT晓夏 · 2024-03-18 23:36:24 发布

cordova开发环境安装(2024新版）

1. cordova简介
2. cordova开发环境搭建
3. 建立第一个cordova工程
4 其他需要注意的问题

1. cordova简介

Apache Cordova是Apache基金会支持的一套开源移动APP的开发工具，其前身是phonegap。phonegap被收购后，开发者将其核心代码部分捐给Apache，并取名Cordova。它允许移动APP开发者使用HTML+CSS+JavaScript来访问本地设备的功能，“one code base"完成多终端平台的移动应用开发。它可以与目前流行的UI框架，例如：vue、Ionic、jQuery Mobile等结合，实现H5面向多平台（android、IOS）多终端（手机、手表、平板、TV…）的开发。
注：
本章内容为：JDK17+android SDK 13+Cordova12最新版本的安装指南
若需要JDK8+android SDK 10+Cordova10的安装说明，请参考:cordova开发Hybird APP——开发环境安装

2. cordova开发环境搭建

以android平台开发为例，完成开发环境搭建。需要依次下载安装：

JDK
android SDK Tools
Gradle
Node.js
设置环境变量
npm安装Cordova

注意：

若开发基于IOS，需安装IOS平台支持，参考：IOS Platform Support
在进行下述安装前，请确保已安装好JDK。所需JDK的版本根据要安装的cordova版本不同。
cordova并不建议安装最新版本JDK。
若使用2021年7月发布的Cordova Android 10.0.0以后版本建议安装JDK 11，低于该版本的Cordova建议安装JDK8.
目前建议安装版本JDK11或JDK17。

安装完成后，在命令行运行以下命令验证：

  	javac -version

2.1安装android SDK

(1)安装Android Studio

官网下载android studio安装程序，运行，目的是安装Android SDK。
下载地址：android Developers

提示：在安装中，需要访问大量网络资源，务必保证网络畅通！

在这里插入图片描述
安装到指定目录，例如：d:\android\android studio。也可以standard安装（记录所安装的目录）。后面Next，直到安装完成，然后会自动进入设置界面。
此时，如果出现错误：“unable to access Android SDK add-on list”，要求设置proxy，解决方法是：
打开android studio安装目录下\bin\idea.properties文件，在末尾添加：

disable.android.first.run=true

保存，即可避免在未安装SDK情况下检查。

(2)安装android SDK

再次运行android studio
出现如下画面后，进入”SDK Manager"
在这里插入图片描述
会看到SDK空白，未安装任何内容，如下图，进入"Edit"

这个安装目录如果修改，会提示错误？！

这里需要2个部分全部选“Accept"，否则Next按钮不会点亮。

Finish,至此Adndroid SDK安装完成！

(3)设置SDK manager

运行android studio，再次进入SDK Manager，用其继续完成所需扩展支持安装，今后也可用于更新。
分别在SDK Platforms、SDK Tools中安装所需支持的android版本。

- SDK Platforms

这里需要安装所需的android版本的SDK Platform（在前面的check框打V）,根据要开发的功能需要选择安装，例如Android 13，Android 10…，不同版本支持的功能有些许差异。安装时选择后面API Level为数字的选项。

注：该版本应根据要运行APP的android手机版本选择，对于不同android SDK版本和cordova的版本对应关系参考： cordova与android的版本对应和安装

若无特定版本需求，建议安装如下打勾内容：
建议安装
- SDK Platforms
安装Android 12到13，即API Level 31、32、33
在这里插入图片描述
- SDK TOOLS
必须安装:
build-Tools 33.0.2\31.0.0\34.0.0
Android SDK Command-line Tools(latest)
Android Emulator
Android SDK Platform-Tools
如下图：

等待安装完成。
以后需要时可再安装其他所需内容。

更多内容可参照cordova关于android平台支持的官方文档：Android Platform Support

2.2安装gradle

gradle用于自动编译。
下载gradle地址：https://services.gradle.org/distributions/

下载gradle-x.x-bin.zip文件（gradle-x.x-all.zip多了源码src和docs、samples目录），完成后拷贝到目标目录解压。例如：安装到D:\Android\gradle-X.X目录。(X.X是你下载的版本号）

2.3 安装Git(可选）

Git是源代码控制管理工具，不仅可以管理代码，还是下载各种包的工具。

下载地址：www.git-scm.com/downloads

选择windows,会自动下载符合你操作系统的安装文件。例如64位windows版本。

下载后运行。安装路径也改到D:\android：

此后全部用默认值，下一步，结束安装。

2.4 安装Node.js

需要用其npm工具完成后续cordova软件安装。

下载地址：http://nodejs.org

选择LTS的最新版本下载，而不是Current版本。运行：同样修改安装路径：D:\android\nodejs
在这里插入图片描述

2.5 设置环境变量

安装完成上述软件后，设置环境变量如下：

计算机－属性－高级系统设置－环境变量－系统变量－Path

编辑该系统变量。

确保有以下内容（若是多个变量之间用；分隔），注意是要自己安装的对应路径！
在这里插入图片描述

保存path设置。
新增如下系统变量：
在这里插入图片描述

- 注意：

1、以上设置的具体值要指向你所安装的文件夹目录。
2、不要删除系统变量path中%SystemRoot开头的相关设置，会导致cordova执行出错
3、系统变量path在新设置的路径之前如果有其他版本的路径，会导致找不到所需的应用，需要把本次设置的内容“上移”；另外，也要注意用户path中是否有类似冲突

2.6 验证安装环境

cmd打开命令窗口，按以下方法依次执行，验证安装是否正确:

adb                      //验证android
gradle －v            //验证编译
javac                           //验证java
git                              //验证git
npm                           //验证npm

出现任何问题，都解决后再继续后续步骤！

2.7 安装Cordova

在命令窗口中键入：

npm install -g cordova

其中：－g
表示安装为全局命令方式。
完成后验证：

cordova －v

出现最新版本号，则安装正确！

若出现”“不是内部或外部命令,也不是可执行文件…"的错误提示，需要将安装路径添加到path环境变量，方法如下：
检查cordova的安装路径和环境变量，在系统变量Path末尾增加该路径。
一般在以下目录：C:\Users\xxx\AppData\Roaming\npm;

关闭后，重新打开命令窗口cmd，再次验证cordova -v

注意：该path路径必须根据本机实际安装路径修改

至此，完成cordova环境安装。

后期需要更新cordova，可以用如下命令：

npm update -g cordova

3. 建立第一个cordova工程

第一步创建工程

cmd进入命令行方式（以下每一步都在cmd中完成），键入如下命令：

进入要建立工程的程序目录（根据自己的安装路径，我的为myApps）:

d:
cd myApps

建立工程：

cordova create myfirst

第二步增加android平台支持

平台支持在每个工程文件建立后，进入该工程文件目录，安装需要支持的平台，即要开发android 还是ios平台下的应用，对应每个工程都需要建立自己的平台支持！
方法是：

在cmd命令窗继续执行以下命令：

进入工程文件目录：

cd myfirst

增加android平台支持：

cordova platform add android

验证是否安装成功:

cordova platforms

会出现类似如下窗口：
在这里插入图片描述

第三步编译

在cmd命令窗继续执行以下命令：

编译：

cordova compile

生成执行文件：

cordova build

执行build时会首先compile,因此可以用build命令替代编译。
编译成功，显示类似下图：
在这里插入图片描述

第四步运行程序

用USB连接手机和计算机，打开“开发者模式”－“USB调试”，

cmd窗口运行

cordova run

手机屏幕出现第一个cordova工程的demo画面

在这里插入图片描述
或者，用以下命令运行到模拟器：

cmd窗口运行

cordova emulate android

关于模拟器运行问题和安装调试：
最新android studio模拟器未见黑屏问题，使用方法和问题解决见：
Android studio 23.3.13版本模拟器设置

若模拟器不能正常运行，采用真机和第三方模拟器的方法，请参考：Android开发第三方模拟器使用、真机运行以及黑屏的解决

4 其他需要注意的问题

（1）在JDK、android SDK、Cordova各个版本的匹配上，需要彼此适配。
建议：
新版本用：JDK11或17+android SDK 13+cordova12
老版本用：JDK8+android SDK10+cordova10
具体各个版本的关系参考这篇文章：
cordova与android的版本对应和安装
或者官网：https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html

（2）cordova缺省为安装最新版本，当需要安装指定的cordova版本时，使用如下命令（以安装9.0.0版本为例）：