uniapp怎么设置公用颜色

在Uniapp中，可以通过在`App.vue`中设置全局样式来实现公用颜色的设置。具体步骤如下：

1. 在`App.vue`中添加`<style>`标签，用于设置全局样式。

2. 在`<style>`标签中定义颜色变量，例如：

   <style>
     :root {
       --primary-color: #007aff; /* 主色 */
       --secondary-color: #ced4da; /* 次要色 */
     }
   </style>

3. 在组件中需要使用到颜色时，可以直接使用定义的变量，例如：

   <template>
     <div style="background-color: var(--primary-color);">
       <p style="color: var(--secondary-color);">Hello World</p>
     </div>
   </template>

这样就可以方便地在Uniapp中设置公用颜色了。

相关问题

uniapp template使用公用颜色

在Uniapp中，你可以使用全局样式来定义公用颜色。

1. 在 `App.vue` 中添加 `<style>` 标签。

2. 在 `<style>` 标签内定义全局样式，如下所示：

   <style>
     /* 定义全局主题颜色 */
     :root {
       --primary-color: #007aff; /* 例如：主题色为蓝色 */
     }
   </style>

3. 在需要使用公用颜色的组件中，使用 `var()` 函数调用全局样式中定义的颜色，如下所示：

   <template>
     <view class="primary">
       <text>这是主题颜色</text>
     </view>
   </template>
   
   <style>
     .primary {
       background-color: var(--primary-color); /* 调用全局主题颜色 */
     }
   </style>

通过这种方式，你就可以在整个应用中使用公用颜色了。如果需要修改主题颜色，只需要在全局样式中修改 `--primary-color` 的值即可。

uniapp公用css样式

以下是两种在uniapp中引入公共CSS样式的方法：

1. 在app.vue文件中引入：

<script>
export default {
  onLaunch: function() {
    console.log('App Launch')
  },
  onShow: function() {
    console.log('App Show')
  },
  onHide: function() {
    console.log('App Hide')
  }
}
</script>

<style lang="scss">
/* 每个页面公共css */
@import "uview-ui/index.scss";

uni-page-body {
  // 设置页面高度为100vh
  // height: 100vh;
}

/* #ifdef H5 */
uni-page-head {
  display: none;
}
/* #endif */
</style>

2. 在项目入口文件main.js中引入：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import "./assets/css/global.css"
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')