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
如下图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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版本为例):

npm install -g cordova@9.0.0

(3)可以在命令窗用cordova requirements命令,检查android等平台安装是否成功
如图安装正确:
在这里插入图片描述

下图为存在问题:
在这里插入图片描述

Logo

科技之力与好奇之心,共建有温度的智能世界

更多推荐