如何在uni-app中动态设置页面背景解决深色页面闪白问题

在 uni-app 中，可以通过动态修改 globalStyle 或页面样式来解决深色页面切换时的闪白问题。虽然 pages.json 中的配置是静态的，但可以通过以下方法实现动态背景设置：

1. 使用 CSS 变量动态控制背景色
   在 App.vue 中定义全局 CSS 变量，通过 JavaScript 动态修改变量值，各页面根据变量应用背景色：

   :root {
     --page-bg-color: #ffffff; /* 默认浅色 */
   }
   page {
     background-color: var(--page-bg-color);
   }
   

   在需要切换背景色的地方调用：

   // 切换为深色
   document.documentElement.style.setProperty('--page-bg-color', '#000000');
   

2. 通过 Vuex 管理全局状态
   结合 Vuex 存储主题状态，在页面组件的 onLoad 或 onShow 生命周期中根据状态动态设置背景色：

   onShow() {
     const theme = this.$store.state.theme;
     uni.setPageStyle({
       style: {
         background: theme === 'dark' ? '#000000' : '#ffffff'
       }
     });
   }
   

3. 使用 uni.setBackgroundColor（仅限 APP 端）
   在 APP 端可通过 uni.setBackgroundColor 动态设置窗口背景：

   // 适用于 nvue 页面或 Webview
   uni.setBackgroundColor({
     backgroundColor: '#000000'
   });