VueJS的H5包装成Cordova APP

前提条件

已经安装了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

配置环境变量:

VueJS的H5包装成Cordova APP

# 新建环境变量
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,以及各种工具等等

VueJS的H5包装成Cordova APP

选择相关SDK安装即可。

安装gradle

使用sdk模式安装,需要单独安装gradle

下载:https://gradle.org/releases/

下载后解压:C:androidgradle-7.3并配置环境变量和Path路径:

VueJS的H5包装成Cordova APP

VueJS的H5包装成Cordova APP

新建Android模拟器

运行Android sdk下面的AVD Manager.exe可以新建Android模拟器,可以选择x86的CPU架构,速度快些:

VueJS的H5包装成Cordova APP

这个 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,然后重启

可以看到模拟器已经启动成功了:

VueJS的H5包装成Cordova APP

运行cordova android

上面的步骤都完成之后,可以启动app了:

cordova run android

可以看到启动结果,看到cordova的图片就表示成功了:

VueJS的H5包装成Cordova APP

后续可以仅根据需要修改相关信息。

cordova引入Vue工程

Vue项目打包之后会有个dist目录,复制这个dist目录下得文件到cordova项目的www目录,然后再次运行cordova android工程。

cordova run android

运行结果:

VueJS的H5包装成Cordova APP

看到自己的H5工程首页,表示成功了。

给TA打赏
共{{data.count}}人
人已打赏
运维

Intellij IDEA远程调试Tomcat和Spring Boot项目

2024-11-19 10:37:24

运维

搭建code-push-server热更新Cordova项目

2024-11-19 10:37:28

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索