使用Cordova執行專案到android

sunshine233發表於2024-06-11
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
  • cordova run android
  • 如果連線的有真機（開啟了usb除錯），就執行到真機了。
  • （也可以把生成的 .apk傳送到手機自行安裝）

執行成功以後就不用開啟Android Studio了，用VScode開啟專案即可，修改完以後直接執行 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' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���

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>

相關文章