uni-app vue3x项目打包安卓app出现双启动图问题,配置了自定义启动图后,首次安装并首次点击进入会出现两个启动图

发布于 1周前 作者 eggper 来自 Uni-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

Screen.zip


1 回复

针对你提到的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字段指向正确的启动图路径,并且图片尺寸与widthheight字段匹配。

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时出现双启动图的问题。如果问题仍然存在,可能需要更详细地检查你的项目配置和代码。

回到顶部