uni-app vue3x项目打包安卓app出现双启动图问题,配置了自定义启动图后,首次安装并首次点击进入会出现两个启动图
uni-app vue3x项目打包安卓app出现双启动图问题,配置了自定义启动图后,首次安装并首次点击进入会出现两个启动图
操作步骤:
下载安装包—首次安装–点击应用打开–出现第一个启动图(不是我自定义配置的图,是一个l蓝色底中间一个logo的图,屏幕下方没有留白底)–出现第二个启动图(是我配置的.9格式的自定义启动图,屏幕下方有留白底)
备注:蓝色是app的主题色 logo是应用图标
预期结果:
下载安装包—首次安装–点击应用打开–直接出现我配置的.9格式的自定义启动图
实际结果:
下载安装包—首次安装–点击应用打开–出现第一个启动图(不是我自定义配置的图,是一个l蓝色底中间一个logo的图,屏幕下方没有留白底)–出现第二个启动图(是我配置的.9格式的自定义启动图,屏幕下方有留白底)
备注:蓝色是app的主题色 logo是应用图标
bug描述:
uniapp vue3x项目,打包安卓app,配置了自定义启动图(.9格式的图片),首次安装后、首次点击进入的时候会出现两个启动图
信息类别 | 详细信息 |
---|---|
产品分类 | uniapp/App |
PC开发环境 | Windows |
PC开发环境版本 | Windows 11 家庭中文版 |
HBuilderX类型 | 正式 |
HBuilderX版本 | 4.07 |
手机系统 | Android |
手机系统版本 | Android 12 |
手机厂商 | 三星 |
手机机型 | SM-A3360/DSN |
页面类型 | vue |
vue版本 | vue3 |
打包方式 | 云端 |
项目创建方式 | HBuilderX |
针对你提到的uni-app在Vue 3.x项目中打包安卓APP时出现双启动图的问题,这通常是由于配置不当或者资源文件处理有误导致的。以下是一些可能的解决方案,并附带相关的代码和配置示例,帮助你定位和解决问题。
1. 检查manifest.json
配置
首先,确保你在manifest.json
中正确配置了自定义启动图。以下是一个配置示例:
{
"mp-weixin": {},
"app-plus": {
"name": "你的应用名",
"version": {
"name": "1.0.0",
"code": "100"
},
"splashscreen": {
"autoclose": true, // 是否自动关闭启动图
"waitTime": 3000, // 等待时间(毫秒),建议与图片播放时间一致
"image": {
"path": "static/splash.png", // 启动图路径
"width": "750px",
"height": "1334px"
}
}
}
}
确保path
字段指向正确的启动图路径,并且图片尺寸与width
和height
字段匹配。
2. 清理项目并重新打包
有时候,旧的构建缓存可能会导致问题。尝试清理项目并重新打包:
# 清理项目
npm run clean
# 重新打包
npm run build:app-plus
3. 检查资源文件
确保你的启动图文件(如splash.png
)没有被重复引用或误放在其他目录中,这可能会导致打包时包含多个启动图。
4. 自定义原生页面处理
如果你使用了自定义原生页面,确保没有在原生代码中再次设置启动图。这通常涉及到Android的Activity
或iOS的ViewController
配置。
5. 检查AndroidManifest.xml
如果你直接修改了AndroidManifest.xml
文件(通常不推荐这样做,除非你有特殊需求),确保没有在其中添加额外的启动图配置。
6. 调试和日志
如果以上步骤都无法解决问题,你可以尝试在Android设备上启用调试模式,查看启动过程中的日志输出,以确定是哪个环节导致了双启动图的出现。
# 启用ADB日志
adb logcat | grep "你的应用包名"
通过以上步骤,你应该能够定位并解决uni-app在Vue 3.x项目中打包安卓APP时出现双启动图的问题。如果问题仍然存在,可能需要更详细地检查你的项目配置和代码。