uniapp平台APP端动态改变窗体颜色

Question

因为做了个换肤功能，想要动态更改窗体的颜色，但是uni.setBackgroundColor不能支持APP端,有没有别的方法动态改变窗体颜色，是窗体背景颜色，不是页面的背景颜色，就是ios上下拉动显示出来的背景颜色

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

---

在uniapp中，可以通过在App.vue中监听onLaunch生命周期，并设置全局变量来动态更改窗体的背景颜色。具体操作如下：

1. 在App.vue中，定义全局变量appColor：

   export default {
   onLaunch() {
    // 设置全局变量appColor，默认为白色
    uni.setStorageSync('appColor', '#ffffff');
   },
   }
   

2. 在需要更改窗体颜色的页面中，使用全局变量设置窗体的背景颜色：

   export default {
   onShow() {
    // 读取全局变量appColor
    const appColor = uni.getStorageSync('appColor');
   
    // 设置窗体的背景颜色
    uni.setBackgroundColor({
      backgroundColor: appColor,
    });
   },
   }
   

3. 在换肤功能中，通过调用uni.setStorageSync方法来更新全局变量appColor，并重新加载页面：

   // 在换肤功能中，更新全局变量appColor，并重新加载页面
   uni.setStorageSync('appColor', '#00ff00');
   uni.reLaunch({
   url: '/pages/index/index',
   });
   

注意：

• 以上为示例代码，具体根据项目情况进行调整。
• 窗体背景颜色的设置在onShow生命周期中进行，可以实现页面切换时及时更新窗体的背景颜色。
• 通过uni.setBackgroundColor方法来设置窗体的背景颜色，需要在uniapp基础库版本v2.9.1或以上才支持在APP端设置窗体背景颜色。