uni-app 4.32打包Android时 小米澎湃手机无法启用深色模式

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

uni-app 4.32打包Android时 小米澎湃手机无法启用深色模式

操作步骤：

  • 两台手机（一台为Android14， HyperOS1，一台为Google原生Android15），分别安装相同安装包

预期结果：

  • 两台设备在深色模式下均可使用深色模式

实际结果：

  • HyperOS设备依然是浅色模式，原生安卓为深色模式

bug描述：

  • 同一个安装包，在原生安卓上支持深色模式，在小米澎湃中不支持深色模式

| 项目信息           | 详细信息        |
|-------------------|---------------|
| 产品分类           | uniapp/App    |
| PC开发环境操作系统 | Windows       |
| PC开发环境版本号   | 10.0.22635.4440 |
| HBuilderX类型     | Alpha         |
| HBuilderX版本号   | 4.32          |
| 手机系统           | Android       |
| 手机系统版本号     | Android 14    |
| 手机厂商           | 小米          |
| 手机机型           | Redmi Note 14 Pro |
| 页面类型           | vue           |
| vue版本            | vue3          |
| 打包方式           | 云端          |
| 项目创建方式       | HBuilderX     |

Harmonyos Next教程
4 回复

这么说太笼统了。在有问题的手机上真机运行，打印uni.getSystemInfo，看osTheme是什么


这是两台手机在深色模式下的输出结果：

在小米提供的云测平台测试了一批设备 https://testit.miui.com/remote uni.getSystemInfo返回的信息都是对的。你可以在云测上测试下你的apk 主题是否正常，不排除你的设备系统出现了bug导致

在解决uni-app 4.32打包Android应用时，小米澎湃手机无法启用深色模式的问题时，首先需要确认你的应用是否已经正确实现了深色模式的支持。uni-app支持通过配置和代码的方式来实现深色模式。以下是一些代码案例，帮助你确保你的应用已经正确设置了深色模式。

1. 配置文件设置

确保在manifest.json文件中已经配置了深色模式支持。在app-plus节点下添加或确认以下配置：

"app-plus": {
    "distribute": {
        "android": {
            "darkmode": true // 启用深色模式
        }
    }
}

2. 样式文件调整

在App.vue或相关样式文件中，你可以使用CSS变量来定义深色模式下的样式。例如：

/* App.vue 中的样式 */
:root {
    --background-color: #ffffff;
    --text-color: #000000;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #000000;
        --text-color: #ffffff;
    }
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

3. 动态切换深色模式

如果你的应用需要动态切换深色模式，可以通过JavaScript来监听系统主题变化，并更新应用的样式。例如：

export default {
    data() {
        return {
            isDarkMode: window.matchMedia('(prefers-color-scheme: dark)').matches
        };
    },
    mounted() {
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
            this.isDarkMode = e.matches;
            this.updateStyles();
        });
    },
    methods: {
        updateStyles() {
            document.documentElement.style.setProperty('--background-color', this.isDarkMode ? '#000000' : '#ffffff');
            document.documentElement.style.setProperty('--text-color', this.isDarkMode ? '#ffffff' : '#000000');
        }
    }
};

4. 兼容性检查

确保你的代码中没有硬编码的颜色值，特别是在组件和页面样式中。所有颜色值都应该使用CSS变量或动态设置，以确保在不同主题下都能正确显示。

5. 打包与测试

完成上述配置后，重新打包你的uni-app应用，并在小米澎湃手机上进行测试。如果问题仍然存在，可能需要检查小米澎湃手机是否支持深色模式，或者是否有特定的系统设置需要调整。

通过上述步骤，你应该能够确保你的uni-app应用在小米澎湃手机上能够正确启用深色模式。

回到顶部