uni-app自定义启动页时，一加手机出现两个启动界面，第一个中间是个大logo，第二个才是正常的启动界面

发布于 1周前 作者 itying888 来自 Uni-App

uni-app自定义启动页时，一加手机出现两个启动界面，第一个中间是个大logo，第二个才是正常的启动界面

操作步骤

第一次启动APP时

预期结果

不要显示第一个启动界面

实际结果

出现两个启动界面，第一个界面中间是个大log。第二个界面才是正常的启动界面

bug描述

一、问题描述

自定义启动页时，一加手机出现两个启动界面，第一个界面中间是个大log。第二个界面才是正常的启动界面。小米，华为手机测试正常没有发现问题。

二、项目中manifest中的App启动界面配置

manifest配置

三、问题现象

问题现象录屏

开发环境信息

项目创建方式 PC开发环境操作系统 PC开发环境操作系统版本号 HBuilderX类型 HBuilderX版本号 手机系统 手机系统版本号 手机厂商 手机机型 页面类型 vue版本 打包方式
HBuilderX Windows win11 正式 3.95 Android Android 13 一加 PHK110 vue vue2 云端

Harmonyos Next教程
11 回复

解决方案：https://ask.dcloud.net.cn/question/174840?notification_id-1348602rf-falseitem_id-260270__answer_id-260270__single-TRUE#!answer_260270


楼主相关信息：刚刚了解到这个是需要做android12启动页适配 （具体可以百度：android12启动页适配 SplashSreen） 这个是安卓12后的新特性，相关文章：https://juejin.cn/post/7026188311198695432

感谢作者的排查，这个论坛中有一些相似问题，结论和你一致，有其他问题环境继续沟通

我下载了一个MuMu模拟器12安卓模拟器也复现了这个问题，设置的机型是OPPO 型号：Reno8

根据技术交流反馈oppo r型号手机也会这样

就是附件中视频第2秒的时候那个页面不该出现，不知道为啥有这个页面，目前不知道咋解决

刚刚了解到这个是需要做android12启动页适配 （具体可以百度：android12启动页适配 SplashSreen）

这个是安卓12后的新特性，相关文章：https://juejin.cn/post/7026188311198695432

自定义启动图时，先弹出 自定义的启动图，然后再弹出一个 满屏的 logo。 这是什么情况呢？

解决方案：https://ask.dcloud.net.cn/question/174840?notification_id-1348602rf-falseitem_id-260270__answer_id-260270__single-TRUE#!answer_260270

在处理uni-app自定义启动页时遇到一加手机出现两个启动界面的情况，通常是由于系统自带的启动动画与应用的自定义启动页冲突导致的。为了解决这个问题，我们可以尝试通过以下几种方法来优化启动流程，确保只显示自定义的启动页。

方法一：禁用系统启动动画

虽然直接禁用系统启动动画在普通用户设备上不可行，但我们可以尝试通过配置AndroidManifest.xml来引导系统尽可能使用我们的启动页。以下是一个配置示例，尝试设置主题来覆盖默认启动动画：

<!-- 在AndroidManifest.xml中配置Activity主题 -->
<activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:theme="@style/LaunchTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

<!-- 在styles.xml中定义LaunchTheme -->
<style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@drawable/launch_background</item> <!-- 使用自定义背景 -->
    <item name="android:windowDisablePreview">true</item> <!-- 尝试禁用预览窗口 -->
</style>

方法二：优化自定义启动页逻辑

确保自定义启动页的逻辑尽可能简单，避免复杂的初始化操作，以减少启动时间。以下是一个简单的自定义启动页示例，使用uni-app的页面生命周期函数：

// 在pages.json中配置启动页路径
{
    "pages": [
        {
            "path": "pages/launch/launch",
            "style": {
                "navigationBarTitleText": "启动页"
            }
        },
        // 其他页面配置...
    ]
}

// 在launch.vue中
<template>
    <view class="container">
        <image class="logo" src="/static/logo.png" mode="aspectFit"></image>
    </view>
</template>

<script>
export default {
    onLoad() {
        // 模拟一些初始化操作，比如检查版本更新等
        setTimeout(() => {
            uni.navigateTo({ url: '/pages/home/home' }); // 跳转到首页
        }, 2000); // 延迟2秒跳转
    }
}
</script>

<style>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #ffffff;
}
.logo {
    width: 100px;
    height: 100px;
}
</style>

通过上述配置和优化，可以尽量减少系统启动动画与应用启动页之间的冲突，确保用户只看到一个干净、快速的启动过程。如果问题依旧存在，建议进一步检查一加手机的特定系统行为或联系一加官方寻求支持。

回到顶部