UniApp 设置全局字体样式和背景色

一、前言

在 UniApp 开发中，为了保持应用界面风格统一，通常需要设置全局的字体样式和背景色。本文将详细介绍在 UniApp 中实现全局样式设置的几种常用方法，涵盖 CSS 变量、App.vue 全局样式、uni.scss 主题变量以及条件编译等场景。

二、在 App.vue 中设置全局样式

这是最直接的方法，在 App.vue 文件的 <style> 标签中定义的样式会作用于所有页面。

html 复制代码

<!-- App.vue -->
<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<style>
/* 全局字体样式 */
page, .uni-page-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #333333;
  line-height: 1.6;
}

/* 全局背景色 */
page {
  background-color: #f8f9fa;
}

/* 全局链接样式 */
a {
  color: #007aff;
  text-decoration: none;
}

/* 全局按钮基础样式 */
.uni-btn {
  font-weight: 500;
  border-radius: 8px;
}
</style>

注意事项：

使用 page 选择器可以设置整个页面的样式。
在 H5 端，page 选择器可能不生效，可以使用 body 或 .uni-page-body。
这里定义的样式优先级低于页面内定义的样式。

三、使用 CSS 变量实现主题化

CSS 自定义属性（CSS Variables）非常适合管理全局主题样式，便于统一修改和维护。

css 复制代码

/* 在 App.vue 或公共 CSS 文件中定义 CSS 变量 */
:root {
  /* 字体相关变量 */
  --global-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --global-font-size: 16px;
  --global-font-color: #333333;
  --global-line-height: 1.6;
  
  /* 颜色主题变量 */
  --global-bg-color: #f8f9fa;
  --global-primary-color: #007aff;
  --global-secondary-color: #5856d6;
  --global-success-color: #34c759;
  --global-warning-color: #ff9500;
  --global-danger-color: #ff3b30;
  
  /* 间距变量 */
  --global-spacing-unit: 8px;
}

/* 应用全局变量 */
page {
  font-family: var(--global-font-family);
  font-size: var(--global-font-size);
  color: var(--global-font-color);
  line-height: var(--global-line-height);
  background-color: var(--global-bg-color);
}

/* 在组件中使用 */
.custom-component {
  color: var(--global-primary-color);
  background-color: var(--global-bg-color);
  padding: calc(var(--global-spacing-unit) * 2);
}

四、通过 uni.scss 管理主题样式

UniApp 支持 SCSS，可以通过 uni.scss 文件管理全局的 SCSS 变量。

scss 复制代码

// uni.scss
// 字体配置
$font-family-base: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-size-base: 16px;
$font-color-base: #333333;
$line-height-base: 1.6;

// 颜色主题
$bg-color-base: #f8f9fa;
$color-primary: #007aff;
$color-success: #34c759;
$color-warning: #ff9500;
$color-danger: #ff3b30;
$color-info: #5856d6;

// 间距
$spacing-base: 8px;

// 导出到 CSS 变量（可选）
:root {
  --font-family-base: #{$font-family-base};
  --font-size-base: #{$font-size-base};
  --bg-color-base: #{$bg-color-base};
  --color-primary: #{$color-primary};
}

// 全局样式混入
@mixin global-font-style {
  font-family: $font-family-base;
  font-size: $font-size-base;
  color: $font-color-base;
  line-height: $line-height-base;
}

@mixin global-bg-style {
  background-color: $bg-color-base;
}

在页面或组件中使用：

scss 复制代码

// 页面样式文件
@import '@/uni.scss';

.page-container {
  @include global-font-style;
  @include global-bg-style;
  
  .title {
    color: $color-primary;
    font-size: $font-size-base * 1.25;
  }
}

五、条件编译处理多端差异

不同平台（小程序、H5、App）的样式支持可能存在差异，可以使用条件编译。

css 复制代码

/* #ifdef H5 */
body, .uni-page-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #f8f9fa;
}
/* #endif */

/* #ifdef MP-WEIXIN */
page {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #f8f9fa;
}
/* #endif */

/* #ifdef APP-PLUS */
page {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #f8f9fa;
}
/* 在 App 端可能需要额外设置状态栏背景 */
.status-bar {
  background-color: #f8f9fa;
}
/* #endif */

六、使用全局 CSS 文件

创建独立的全局 CSS 文件，然后在 main.js 或 App.vue 中引入。

css 复制代码

/* styles/global.css */
/* 基础字体样式 */
.global-font {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #333333;
  line-height: 1.6;
}

/* 基础背景色 */
.global-bg {
  background-color: #f8f9fa;
}

/* 全局工具类 */
.text-primary {
  color: #007aff;
}

.bg-light {
  background-color: #f8f9fa;
}

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }

在 App.vue 中引入：

html 复制代码

<!-- App.vue -->
<style>
@import '@/styles/global.css';

/* 其他全局样式 */
</style>

七、动态修改全局样式

如果需要支持主题切换或动态样式，可以使用 JavaScript 动态修改 CSS 变量。

javascript 复制代码

// 在 main.js 或工具函数中
export function setGlobalTheme(theme) {
  const root = document.documentElement;
  
  if (theme === 'dark') {
    root.style.setProperty('--global-bg-color', '#1a1a1a');
    root.style.setProperty('--global-font-color', '#ffffff');
    root.style.setProperty('--global-primary-color', '#0a84ff');
  } else {
    root.style.setProperty('--global-bg-color', '#f8f9fa');
    root.style.setProperty('--global-font-color', '#333333');
    root.style.setProperty('--global-primary-color', '#007aff');
  }
}

// 在 Vue 组件中使用
export default {
  methods: {
    switchTheme(theme) {
      setGlobalTheme(theme);
      // 可以同时保存到本地存储
      uni.setStorageSync('app_theme', theme);
    }
  }
}

八、最佳实践建议

统一管理变量 ：将字体、颜色、间距等设计变量集中管理，推荐使用 uni.scss 或 CSS 变量。
考虑多端兼容：使用条件编译处理平台差异，特别是小程序和 H5 的样式差异。
保持样式优先级清晰：全局样式使用较低的优先级，组件样式使用较高的优先级。
性能优化：避免在全局样式中使用过于复杂的选择器或大量通配符。
主题切换方案：如果需要支持主题切换，优先使用 CSS 变量方案，性能更好。

九、常见问题与解决方案

1. 全局样式在小程序中不生效？

解决方案：

检查是否使用了正确的选择器（小程序中使用 page）。
确认样式文件是否正确引入。
检查是否有样式冲突或被覆盖。

2. 如何覆盖全局样式？

在页面或组件中使用更具体的选择器或提高样式权重：

css 复制代码

/* 页面样式 */
page .custom-element {
  /* 这会覆盖全局样式 */
  font-size: 18px;
}

/* 使用 !important（谨慎使用） */
.special-text {
  color: red !important;
}

3. 动态主题切换时页面闪烁？

解决方案：

在 App.vue 的 onLaunch 中先读取主题设置。
使用 CSS 变量而不是直接修改类名。
考虑使用 CSS 的 transition 实现平滑过渡。

十、总结

UniApp 中设置全局字体样式和背景色有多种方案：

简单项目 ：直接在 App.vue 中定义全局样式。
中型项目 ：使用 CSS 变量或 uni.scss 管理主题变量。
大型项目：结合 CSS 变量、SCSS 和条件编译，支持多端和多主题。

选择合适的方法可以提高代码的可维护性和开发效率，同时确保多端显示效果一致。