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:\android\android-sdk-windows

配置环境变量:

explorer_ad5gVGf92X

# 新建环境变量
ANDROID_SDK_ROOT=C:\android\android-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,以及各种工具等等

java_sQ0hDLab7z

选择相关SDK安装即可。

安装gradle

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

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

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

ApplicationFrameHost_QP0ihWb00v

SystemPropertiesAdvanced_sSNap8NPwH

新建Android模拟器

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

image-20211128182324716

这个 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:\android\android-sdk-windows\extras\intel\Hardware_Accelerated_Execution_Manager执行intelhaxm-android.exe

然后以管理员身份启动命令提示符,并执行bcdedit /set hypervisorlaunchtype off,然后重启

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

image-20211128194511327

运行cordova android

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

cordova run android

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

image-20211128195219223

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

cordova引入Vue工程

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

cordova run android

运行结果:

image-20211128195459126

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

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇