uniapp APP.vue文件动态修改css变量

可以通过以下步骤在uniapp的APP.vue文件中动态修改CSS变量：

1. 在APP.vue文件中的<style>标签中定义需要修改的CSS变量，例如：

<style>
  :root{
    --primary-color: #007bff;
  }
</style>

2. 在APP.vue文件的<script>标签中，定义一个方法来修改CSS变量，例如：

<script>
  export default {
    methods: {
      changeColor() {
        document.documentElement.style.setProperty('--primary-color', 'red');
      }
    }
  }
</script>

3. 在需要的时候，调用该方法来修改CSS变量即可，例如：

<template>
  <div>
    <button @click="changeColor()">Change Color</button>
  </div>
</template>

这样，当用户点击按钮时，CSS变量--primary-color将被修改为红色。注意，这种方式只能在APP.vue文件中修改全局的CSS变量，如果需要在其他组件中修改局部的CSS变量，可以使用scoped CSS或CSS modules。

相关问题

uniapp的app.vue的onLaunch中 document.documentElement.style.fontSize 设置了字体大小， 但是这个框架又给我把字体大小改成16px了， 如何在我这了字体大小之后 不让他修改

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，它允许开发者编写一次代码，然后发布到iOS、Android、Web（包括微信小程序）等平台。在 uni-app 中，`app.vue` 是应用的根组件，而 `onLaunch` 是生命周期钩子，用于应用启动之后执行。

在 `onLaunch` 中设置 `document.documentElement.style.fontSize` 是为了定义应用的基本字体大小。但有时候，uni-app 内部可能在某些阶段重新设置了文档的字体大小，比如为了适配不同屏幕或者是为了满足一些默认样式的要求。

如果你在 `onLaunch` 中设置了字体大小后发现被覆盖，你可以尝试以下方法来解决：

1. **使用 `:root` 伪类变量**：
在 CSS 中使用 `:root` 伪类来设置一个全局变量，这样可以在整个应用中统一修改字体大小。

   :root {
       --fontSize: 20px; /* 设置一个自定义的变量 */
   }

然后在 `onLaunch` 中使用 JavaScript 来动态设置根元素的样式：

   onLaunch: function() {
       document.documentElement.style.setProperty('--fontSize', '20px');
   }

在其他样式表中使用这个变量：

   body {
       font-size: var(--fontSize);
   }

2. **使用 vue.config.js 配置**：
在项目的 `vue.config.js` 文件中添加自定义的 CSS 预处理器，这样可以在全局范围内覆盖默认的样式。

   module.exports = {
       css: {
           loaderOptions: {
               postcss: {
                   plugins: [
                       require('postcss-pxtorem')({
                           rootValue: 16, // 默认根字体大小
                           propList: ['*'] // 需要转换的属性
                       })
                   ]
               }
           }
       }
   }

3. **使用 `hid` 属性**：
在 `App.vue` 中为 `manifest.json` 添加 `config` 字段，并使用 `hid` 属性来禁止系统默认样式：

   {
       "app-plus": {
           "deviceReadyInit": true,
           "hardwareBackButton": false,
           "fullScreen": true,
           "statusBar": {
               "titleNView": false
           },
           "distributeBackgroundAssets": false,
           "subNVues": {
               "default": "auto",
               "multiWindow": {
                   "enable": true,
                   "waiting": true
               }
           },
           "config": {
               "titleBar": false,
               "statusbar": false,
               "navBar": false,
               "statusBarColor": "#ffffff",
               "hardwareAccelerated": true,
               "renderer": "webview"
           }
       }
   }

请注意，以上方法可能需要结合你的实际项目情况调整。如果问题依旧存在，可能需要检查是否有其他框架或插件在内部修改了样式。

app.vue页面写进度条

要在`app.vue`页面中添加进度条，你可以使用Vue.js提供的`<transition>`组件和`<progress>`组件。

下面是一个简单的示例代码：

<template>
  <div id="app">
    <!-- 进度条 -->
    <transition name="fade">
      <progress v-show="isLoading" class="progress" :value="progress" max="100"></progress>
    </transition>

    <!-- 页面内容 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false, // 是否显示进度条
      progress: 0 // 进度条进度（0-100）
    };
  },
  methods: {
    startLoading() {
      // 显示进度条
      this.isLoading = true;
      // 进度条进度从0开始
      this.progress = 0;

      // 模拟加载过程
      let interval = setInterval(() => {
        if (this.progress < 100) {
          this.progress += 10; // 每次增加10%
        } else {
          // 加载完成，隐藏进度条
          clearInterval(interval);
          this.isLoading = false;
        }
      }, 500);
    }
  },
  mounted() {
    // 监听路由变化，开始加载页面时显示进度条
    this.$router.beforeEach((to, from, next) => {
      this.startLoading();
      next();
    });
  }
};
</script>

<style>
/* 进度条样式 */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 9999;
}

/* 进度条动画 */
.fade-enter-active,
.fade-leave-active {
  transition: width 0.5s ease;
}

.fade-enter,
.fade-leave-to {
  width: 0%;
}
</style>

在这个示例中，我们使用了`<transition>`组件和`<progress>`组件来实现进度条。在`data`中定义了两个变量`isLoading`和`progress`，分别表示是否显示进度条和进度条的进度。在`startLoading`方法中，我们使用了`setInterval`来模拟加载过程，每次增加10%的进度，当进度达到100%时，隐藏进度条。在`mounted`生命周期中，我们使用了`$router.beforeEach`来监听路由变化，当页面开始加载时，调用`startLoading`方法显示进度条。

最后，我们使用了一些简单的CSS样式来美化进度条，并实现了进度条的动画效果。