page { background-color } 是跨平台生效的唯一可靠方式，必须写在无 scoped 的 style 标签中，推荐统一置于 App.vue；pages.json 的 backgroundColor 仅控制下拉刷新等窗体背景，不作用于页面内容区。
全局背景色不能只靠 pages.json 的 backgroundColor 实现 —— 它只控制窗体（下拉刷新、弹出层等）背景，不是页面内容区域的背景色。
page { background-color } 是跨平台生效的唯一可靠方式
uni-app 中真正影响页面主体内容区域（即你看到的“白底”或“灰底”）的，是 CSS 选择器 page。它在 App、H5、微信/支付宝/百度等小程序端均被支持（注意大小写：必须小写 page，不是 Page 或 PAGE）。
- 必须写在不带
scoped的<style>标签里，否则会被 Vue 的作用域隔离机制过滤掉 ——page不是普通 DOM 元素，没有 data-id 属性，scoped对它无效 - 推荐统一写在
App.vue的根样式中，避免重复声明：<style> page { background-color: #ffffff; } </style> - 如果项目用了
scss或less，同样适用，但不要包裹在任何 class 或嵌套结构里，必须顶层直接写page - 单页面覆盖全局？直接在该页面的非
scoped<style>里重写page即可，优先级更高
pages.json 的 globalStyle.backgroundColor 有什么用
这个配置项设置的是「原生窗体」背景色，比如下拉刷新时露出的区域、底部弹出层（如 uni.showActionSheet）、甚至某些平台的页面切换过渡背景。它不渲染在页面内容层上，所以即使设了 "backgroundColor": "#fff"，你仍可能看到灰色背景 —— 那是 page 默认色没覆盖到。
- 仅 App 端完全生效；H5 和小程序端基本忽略此字段（官方文档已明确说明）
- 值必须是十六进制颜色（如
#f8f8f8），不支持 rgb()、hsl() 或变量 - 和导航栏配置同属
globalStyle节点，别误放在style下（那是页面级局部配置）
动态改背景色只能靠 uni.setBackgroundColor，且仅限 App
运行时想换背景？uni.setBackgroundColor 是唯一 API，但它改的仍是上面说的「窗体背景」，不是页面内容区。H5 和小程序无法通过 JS 动态修改 page 样式（受限于平台限制和样式注入时机）。
- 调用后立即生效，但仅对后续触发的窗体行为可见（如下拉刷新、弹窗）
- 参数必须传对象，且
backgroundcolor字段名全小写（注意不是backgroundColor）：uni.setBackgroundColor({ backgroundcolor: '#e0f7fa', backgroundcolortop: '#e0f7fa', backgroundcolorbottom: '#b2ebf2' }); - 若需“伪动态”效果（比如主题切换），H5/小程序只能靠切换 class + 全局 CSS 变量，再配合
page的 background 使用var(--bg)
常见失效原因和绕过方案
写对了 page { background-color } 还是灰的？大概率是这些坑：
-
<style scoped>里写了page→ 直接删掉scoped，或拆成两个<style>块：一个无scoped写page，一个有scoped写业务样式 - 用了
body替代page→ 小程序里body无效，App 端行为不稳定，H5 虽然能用但不符合 uni-app 渲染模型 - 页面里用了
flex: 1或height: 100vh的容器，但父级没撑开 →page背景生效了，但被子元素遮住，检查是否漏了min-height: 100vh或display: flex; flex-direction: column - 自定义组件或插件强制设置了内联 background → 用
!important覆盖（慎用），或在组件外层加 wrapper 并设背景
最麻烦的其实是多端一致性：App 端有两套背景（窗体 + 页面），而小程序/H5 只有一套（page）。别指望一个配置打遍天下，得按平台特性分层处理 —— 尤其当设计要求下拉刷新区域和页面主体颜色不同时，globalStyle.backgroundColor 和 page 必须配合使用。
