uni-app page.json globalStyle 设置 app-plus background窗体背景色无效

uni-app page.json globalStyle 设置 app-plus background窗体背景色无效

示例代码：

"globalStyle": {   
    "app-plus": {    
        "background": "#000000"  
    }    
}

操作步骤：

在page.json globalStyle 设置 app-plus background窗体背景色，运行于ios和Android模拟器以及真机测试，ios生效，Android无效

预期结果：

Android和ios都正常生效

实际结果：

ios生效，Android不生效

bug描述：

page.json globalStyle 设置 app-plus background窗体背景色，运行于ios和Android模拟器以及真机测试，ios生效，Android无效

bug示例


更多关于uni-app page.json globalStyle 设置 app-plus background窗体背景色无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

13 回复

android 页面内容body背景需要设置透明 才能看到background背景色

更多关于uni-app page.json globalStyle 设置 app-plus background窗体背景色无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


似乎是这样，不过，我在做动态切换深色主题（android没有@media (prefers-color-scheme: dark)），通过手动拿到webview，setstyle，第一次navigate过去不会白屏闪烁，但是后退再navigate，只要页面稍微复杂点，就会白屏闪烁。 有没有比较好的做dark light 模式切换的方案呀，安卓各种问题，ios倒是挺好的

回复 pwiz: body背景设置透明也不行吗？

回复 pwiz: 可以试下配置webviewBGTransparent = true;

回复 DCloud_Android_ST: html body page 能透明的都透明了 webviewBGTransparent = true 配置了，还是不行，简单页面没问题，稍微有点复杂渲染的就会闪烁

比如A=>B 第一次都是流畅的，然后后面每次都会闪屏 A=>B=>C 如果从C退回A在重新ABC每次C都是流畅的，只要B不重新加载，每次进C都闪，。。。什么道理

回复 DCloud_Android_ST: 我认为可能是拿到新打开的页面的webview并设置style(background)慢了，所以想直接在pages.json配置里直接设置background=transparent（因为要动态换颜色没法固定值），这样似乎是最快的，但是并没有用，还是会白屏

BUG没人看吗

我也遇到了，但是好像要在样式中加上page:{background-color:颜色值}这样才能生效

到底是我们使用方法不对还是BUG，已经有好多人提这个问题了

题主解决了吗

项目结束了，把甲方粑粑忽悠过去了，官方反馈慢导致问题无法解决我们只能带着错误去开发，说实话Uniapp Demo看起来挺好了，用起来坑很多

在 uni-app 中，globalStyle 下的 app-plus 配置主要用于处理 App 平台的特定样式，但 background 属性在 Android 和 iOS 上的表现确实存在差异。根据官方文档和常见实践，app-plus 中的 background 主要影响 iOS 平台的窗体背景色，而 Android 平台默认不支持此属性。

对于 Android 平台，窗体背景色通常需要通过其他方式设置：

  1. 在 pages.json 的 globalStyle 中尝试使用 backgroundColor 属性（非 app-plus 节点下），例如：

    "globalStyle": {
  "backgroundColor": "#000000"
}

    这可能会在部分 Android 设备上生效，但效果有限。

  2. 更可靠的方法是通过原生配置实现。在 manifest.json 的 app-plus 节点下设置 background：

    "app-plus": {
  "background": "#000000"
}

    这会影响 App 启动时的背景色，但可能不覆盖所有页面。

  3. 如果追求一致体验，建议使用 CSS 设置页面背景色。在 App.vue 的样式表中添加：

    page {
  background-color: #000000;
}
回到顶部