使用Cordova运行项目到android

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.

前提：已经安装了Node.js和npm、cnpm （截图不够清晰，所以本文所有的版本号以文字形式展现）

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

C:\Users\Administrator>npm -v
9.3.1

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

安装 cordova： npm install -g cordova -g 是全局安装，对node.js版本的要求见 https://cordova.apache.org/docs/en/12.x/guide/cli/installation.html#requirements-and-support

安装完以后检查是否正确安装： cordova -v

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

在android平台使用 Cordova 的系统要求（System Requirements）。官方文档：https://cordova.apache.org/docs/en/12.x/guide/platforms/android/index.html

The Required Software & Tools：

JDK
Gradle
Android Studio
SDK

JDK的安装、配置环境变量

官网下载： https://www.oracle.com/java/technologies/downloads/#jdk22-windows

早期版本可能需要登录账号，新版本不用登录账号，我用的是 21 ：Java Downloads | Oracle 。exe文件下载完成后直接双击安装，可以修改安装路径，安装完成后需要配置环境变量。

配置jdk环境变量教程可看：https://www.runoob.com/w3cnote/windows10-java-setup.html 、 https://www.jianshu.com/p/f4b4c6177046、https://www.liaoxuefeng.com/wiki/1252599548343744/1280507291631649

以win10 + jdk21 为例，按 win+s 然后输入 env，按回车，进入环境变量页面

点击“环境变量”，系统变量

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

( 我看很多教程里都要配置CLASSPATH 变量，但 java 9之后应该就不用配置CLASSPATH 了 )

修改PATH：新建两条路径 %JAVA_HOME%\bin %JAVA_HOME%\jre\bin 。java 9之后应该也只需要配 %JAVA_HOME%\bin ，我就只配了这一个。

配置完成后依次点确定，打开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)

Gradle的安装、配置环境变量

官网 https://gradle.org/releases/

直接下载链接 https://gradle.org/next-steps/?version=8.8&format=all

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

解压之后配置环境变量。可以直接看教程：https://www.cnblogs.com/leilei0327/p/7054652.html

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

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

配置完成后依次点确定，打开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

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

官网：https://developer.android.google.cn/studio?hl=zh-cn 直接下载最新版就行

如果以前安装过 Android Studio，建议卸载并删除原有配置文件。下载完成后双击安装，可以修改安装路径。（这个gif有原来的Android Studio的sdk缓存）

安装完成以后打开Android Studio，根据软件提示一步步安装并设置Android SDK packages.（这个是没有sdk缓存的视频）

SDK的安装、配置环境变量

配置链接：https://cordova.apache.org/docs/en/12.x/guide/platforms/android/index.html#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 的环境变量，教程：https://www.cnblogs.com/liuyingjie123/p/13938015.html

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

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

Cordova 创建并运行Android项目

创建项目并添加插件：

配置完上述所有环境变量后，我们就可以用Cordova 创建项目并运行了。打开 https://cordova.apache.org/docs/en/12.x/guide/cli/index.html，按照步骤：

在代码目录下输入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
```
原因是没有安装模拟器，不用管它（我已经安装了模拟器甚至打开了模拟器，但是检查的时候仍然提醒没有，可能是版本的原因）

运行到真机或者模拟器（一定要先打开真机或者模拟器）：

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发送到手机自行安装。

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

后续修改内容

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

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

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

命令运行记录如下：

Microsoft Windows [版本 10.0.19045.4291]
(c) Microsoft Corporation。保留所有权利。

E:\code_cordova\demo>cordova create hello com.example.hello HelloWorld
Creating a new cordova project.

E:\code_cordova\demo>cd hello

E:\code_cordova\demo\hello>cordova platform add android
Using cordova-fetch for cordova-android
Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: com.example.hello
        Name: HelloWorld
        Activity: MainActivity
        Android Target SDK: android-34
        Android Compile SDK: 34
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@13.0.0

E:\code_cordova\demo\hello>cordova platform ls
Installed platforms:
  android 13.0.0
Available platforms:
  browser
  electron

E:\code_cordova\demo\hello>cordova requirements

Requirements check results for android:
Java JDK: installed 21.0.1
Android SDK: installed true
Android target: not installed
Command failed with exit code 1: avdmanager list target
Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
        at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
        at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
        at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
        at com.android.sdklib.tool.AvdManagerCli.run(AvdManagerCli.java:213)
        at com.android.sdklib.tool.AvdManagerCli.main(AvdManagerCli.java:200)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
        at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:641)
        at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:188)
        at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:526)
        ... 5 more
Gradle: installed G:\gradle-8.8\bin\gradle.BAT
Some of requirements check failed

E:\code_cordova\demo\hello>cordova build android
Checking Java JDK and Android SDK versions
ANDROID_HOME=G:\Android\Sdk (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)
Using Android SDK: G:\Android\Sdk

BUILD SUCCESSFUL in 759ms
1 actionable task: 1 up-to-date
Subproject Path: CordovaLib
Subproject Path: app

BUILD SUCCESSFUL in 1s
50 actionable tasks: 50 up-to-date
Built the following apk(s):
        E:\code_cordova\demo\hello\platforms\android\app\build\outputs\apk\debug\app-debug.apk

E:\code_cordova\demo\hello>cordova emulate android
Checking Java JDK and Android SDK versions
ANDROID_HOME=G:\Android\Sdk (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)
Using Android SDK: G:\Android\Sdk

BUILD SUCCESSFUL in 703ms
1 actionable task: 1 up-to-date
Subproject Path: CordovaLib
Subproject Path: app

BUILD SUCCESSFUL in 1s
50 actionable tasks: 50 up-to-date
Built the following apk(s):
        E:\code_cordova\demo\hello\platforms\android\app\build\outputs\apk\debug\app-debug.apk
Checking Java JDK and Android SDK versions
ANDROID_HOME=G:\Android\Sdk (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)
Using Android SDK: G:\Android\Sdk
// 这里报错了，不用管
Command failed with exit code 1: apkanalyzer manifest target-sdk E:\code_cordova\demo\hello\platforms\android\app\build\outputs\apk\debug\app-debug.apk
'sh' �����ڲ����ⲿ���Ҳ���ǿ����еĳ���
���������ļ���

E:\code_cordova\demo\hello>cordova run android
Checking Java JDK and Android SDK versions
ANDROID_HOME=G:\Android\Sdk (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)
Using Android SDK: G:\Android\Sdk

BUILD SUCCESSFUL in 695ms
1 actionable task: 1 up-to-date
Subproject Path: CordovaLib
Subproject Path: app

BUILD SUCCESSFUL in 1s
50 actionable tasks: 50 up-to-date
Built the following apk(s):
        E:\code_cordova\demo\hello\platforms\android\app\build\outputs\apk\debug\app-debug.apk
Checking Java JDK and Android SDK versions
ANDROID_HOME=G:\Android\Sdk (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)
Using Android SDK: G:\Android\Sdk
Deploying to device MO22080402200045
Using apk: E:\code_cordova\demo\hello\platforms\android\app\build\outputs\apk\debug\app-debug.apk
Package name: com.example.hello
INSTALL SUCCESS
LAUNCH SUCCESS

E:\code_cordova\demo\hello>

posted @ 2024-06-11 12:03 sunshine233 阅读(393) 评论(8) 编辑收藏举报

sunshine233