"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#141436",
"backgroundColor": "#141436",
"app-plus": {
"background": "#212131",
"animationAlphaBGColor": "#141436",
"animationType":"pop-in"
}
} 
2***@qq.com
- 发布：2020-06-22 10:10
- 更新：2021-04-16 15:38
- 阅读：2416
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Win7
HBuilderX类型： 正式
HBuilderX版本号： 2.7.14
手机系统： Android
手机系统版本号： Android 7.1.1
手机厂商： 平板 QUAD_CORE
手机机型： A64 p3
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
预期结果：
"background": "#212131",生效
"background": "#212131",生效
实际结果：
依旧为#FFFFFF
依旧为#FFFFFF
bug描述：
globalStyle 设置 app-plus background设置颜色 不生效 只有设置成 transparent 才生效
反复测试后发现是应该是官方文档有误，使用backgroundColor才有效，并且backgroundColorTop和backgroundColorBottom会覆盖backgroundColor
需要注意的是，以上操作在nvue一切正常，但是在vue页面，body默认是白色的，也就是说vue页面默认body有背景颜色并且是白色的，解决方法如下：
1、在app.vue中设置body背景透明
/* #ifndef APP-NVUE */
body{
background-color: rgba(0,0,0,0);
}
/* #endif */ 2、但是依然有问题，这样会导致浏览器调试的界面背景依然是白色，如果不开发H5页面的话，这种方法一劳永逸，如果发布H5版本建议在每个页面增加如下样式，不过未测试这种不加scoped会不会对其他页面有影响，随便看了几个页面没发现影响
<style>
page {
background: #f73944;
}
</style>3、再有一种办法是在app.vue中设置body透明之后，再通过clss控制body样式，参考下面
注意看class pages-my-Home 这个名称应该是根据pages.json中页面路径生成的
这样做的好处是nvue和vue页面不管是在h5页面还是APP页面都可以解决问题，并且多个相同背景颜色的页面可以通过选择器分组来控制背景
/* #ifndef APP-NVUE */
body {
background-color: rgba(0, 0, 0, 0);
}
.pages-my-Home {
background: #009EA1;
}
/* #endif */
以上结论未运行在各种小程序上，仅测试了H5和APP，并且测试并不严格，请自行测试
神奇的兔子
纠正一下，这个只测试了ios平台，今天发现在Android平台无效，抱歉，还是求官方解决吧
2021-06-18 12:40