前提条件
已经安装了nodejs环境,使用npm命令查看
npm -v
# 输出版本号
安装Cordova
官方网站:https://cordova.apache.org/
使用命令安装cordova
npm install -g cordova
cordova -v
# 10.0.0 (cordova-lib@10.1.0)
新建cordova工程
使用命令创建cordova工程:
# 创建项目
cordova create MobileTestApp
# 进入工程目录
cd MobileTestApp
# 添加android支持:
cordova platform add android
# 添加ios支持
cordova platform add ios
# 添加web h5支持
cordova platform add web
启动cordova android工程
运行命令:cordova run platform_name,不过必须提前有对应的sdk,如果是ios需要是苹果电脑相关环境,没有相关环境运行会有错误提示。
cordova run android
Checking Java JDK and Android SDK versions
ANDROID_SDK_ROOT=undefined (recommended setting)
ANDROID_HOME=undefined (DEPRECATED)
Failed to find 'ANDROID_SDK_ROOT' environment variable. Try setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.
安装android sdk工具
Android的sdk可以使用Android Studio下载,官方似乎是推荐使用Android Studio下载,已经不提供单独的SDK下载链接,不过第三方网站上有相关地址,可以下载(实际也是Google网址下载)。
下载Android Studio:
https://developer.android.google.cn/studio?hl=zh_cn
第三方有单独的SDK下载:
下载地址(页面搜素android-sdk
):
https://www.androiddevtools.cn/
这里以直接下载SDK为例,下载后解压sdk文件:C:androidandroid-sdk-windows
配置环境变量:
# 新建环境变量
ANDROID_SDK_ROOT=C:androidandroid-sdk-windows
可以启动SDK Manager.exe
了,需要注意的是目前sdk不支持JDK9以上,因此需要有JDK8,查看java版本,JDK9以上可能打不开SDK Manager.exe
:
java -version
openjdk version "1.8.0_302"
OpenJDK Runtime Environment Corretto-8.302.08.1 (build 1.8.0_302-b08)
OpenJDK 64-Bit Server VM Corretto-8.302.08.1 (build 25.302-b08, mixed mode)
下载SDK版本
SDK Manager.exe
运行只可以,可以下载各种版本SDK,以及各种工具等等
选择相关SDK安装即可。
安装gradle
使用sdk模式安装,需要单独安装gradle
下载:https://gradle.org/releases/
下载后解压:C:androidgradle-7.3并配置环境变量和Path路径:
新建Android模拟器
运行Android sdk下面的AVD Manager.exe
可以新建Android模拟器,可以选择x86的CPU架构,速度快些:
这个 Use Host GPU建议勾上,不然性能比较差。
可以先尝试启动模拟器:
如果报错:
Starting emulator for AVD 'Android7.0'
emulator: WARNING: userdata partition is resized from 0 M to 4096 M
emulator: ERROR: x86_64 emulation currently requires hardware acceleration!
Please ensure Intel HAXM is properly installed and usable.
CPU acceleration status: Please disable Hyper-V before using the Android Emulator. Start a command prompt as Administrator, run 'bcdedit /set hypervisorlaunchtype off', reboot.
按照提示,从SDK Manager看Intel HAXM已经安装,不过似乎还是不行,找到目录下手动安装:
C:androidandroid-sdk-windowsextrasintelHardware_Accelerated_Execution_Manager
执行intelhaxm-android.exe
然后以管理员身份启动命令提示符,并执行bcdedit /set hypervisorlaunchtype off
,然后重启
可以看到模拟器已经启动成功了:
运行cordova android
上面的步骤都完成之后,可以启动app了:
cordova run android
可以看到启动结果,看到cordova的图片就表示成功了:
后续可以仅根据需要修改相关信息。
cordova引入Vue工程
Vue项目打包之后会有个dist目录,复制这个dist目录下得文件到cordova项目的www目录,然后再次运行cordova android工程。
cordova run android
运行结果:
看到自己的H5工程首页,表示成功了。