uni-app 样式开发

核心知识点

样式语法

uni-app 支持多种样式语法，包括普通 CSS、SCSS、Less 等预处理器。

1. 普通 CSS

uni-app 默认支持普通 CSS 语法：

/* 普通 CSS 样式 */
.container {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

2. SCSS 预处理器

uni-app 内置支持 SCSS 预处理器，无需额外配置：

/* SCSS 样式 */
$primary-color: #007aff;
$border-radius: 8px;

.container {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  
  .card {
    background-color: #fff;
    border-radius: $border-radius;
    padding: 16px;
    margin: 10px 0;
    
    .title {
      font-size: 18px;
      font-weight: bold;
      color: $primary-color;
    }
  }
}

3. Less 预处理器

uni-app 也支持 Less 预处理器：

/* Less 样式 */
@primary-color: #007aff;
@border-radius: 8px;

.container {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  
  .card {
    background-color: #fff;
    border-radius: @border-radius;
    padding: 16px;
    margin: 10px 0;
    
    .title {
      font-size: 18px;
      font-weight: bold;
      color: @primary-color;
    }
  }
}

多端样式适配

uni-app 支持通过条件编译和平台特定样式文件实现多端适配。

1. 条件编译

使用 /* #ifdef */ 和 /* #endif */ 语法实现平台特定样式：

/* 通用样式 */
.container {
  width: 100%;
  height: 100%;
}

/* 仅在微信小程序中生效 */
/* #ifdef MP-WEIXIN */
.container {
  background-color: #f0f0f0;
}
/* #endif */

/* 仅在 App 中生效 */
/* #ifdef APP-PLUS */
.container {
  background-color: #f5f5f5;
}
/* #endif */

/* 仅在 H5 中生效 */
/* #ifdef H5 */
.container {
  background-color: #fafafa;
}
/* #endif */

2. 平台特定样式文件

uni-app 支持创建平台特定的样式文件，例如：

• style.css - 通用样式文件
• style.mp-weixin.css - 仅在微信小程序中生效
• style.app-plus.css - 仅在 App 中生效
• style.h5.css - 仅在 H5 中生效

3. rpx 单位

uni-app 推荐使用 rpx 单位进行响应式布局，rpx 会根据屏幕宽度自动适配：

/* 使用 rpx 单位 */
.container {
  width: 750rpx; /* 相当于屏幕宽度 */
  height: 100vh;
}

.title {
  font-size: 32rpx;
  margin: 20rpx;
}

.button {
  width: 300rpx;
  height: 80rpx;
  font-size: 28rpx;
}

主题定制

uni-app 支持通过变量和配置实现主题定制。

1. CSS 变量

使用 CSS 变量实现主题定制：

/* 定义主题变量 */
:root {
  --primary-color: #007aff;
  --secondary-color: #5856d6;
  --text-color: #333333;
  --background-color: #f5f5f5;
  --border-color: #e5e5e5;
}

/* 使用主题变量 */
.container {
  background-color: var(--background-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.button {
  background-color: var(--primary-color);
  color: #fff;
}

.button-secondary {
  background-color: var(--secondary-color);
  color: #fff;
}

2. 动态主题

通过 JavaScript 动态修改 CSS 变量实现主题切换：

<template>
  <view>
    <button @click="switchTheme('light')">浅色主题</button>
    <button @click="switchTheme('dark')">深色主题</button>
    <view class="container">
      <text class="title">主题切换示例</text>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    switchTheme(theme) {
      if (theme === 'light') {
        document.documentElement.style.setProperty('--primary-color', '#007aff');
        document.documentElement.style.setProperty('--background-color', '#f5f5f5');
        document.documentElement.style.setProperty('--text-color', '#333333');
      } else if (theme === 'dark') {
        document.documentElement.style.setProperty('--primary-color', '#0a84ff');
        document.documentElement.style.setProperty('--background-color', '#1c1c1e');
        document.documentElement.style.setProperty('--text-color', '#ffffff');
      }
    }
  }
}
</script>

<style>
:root {
  --primary-color: #007aff;
  --background-color: #f5f5f5;
  --text-color: #333333;
}

.container {
  background-color: var(--background-color);
  color: var(--text-color);
  padding: 20rpx;
  border-radius: 8rpx;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: var(--primary-color);
}
</style>

实用案例

实现响应式布局

下面通过一个实用案例展示如何在 uni-app 中实现响应式布局：

1. 网格布局

<template>
  <view class="grid-container">
    <view class="grid-item" v-for="(item, index) in items" :key="index">
      <text class="item-text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: '项目 1' },
        { text: '项目 2' },
        { text: '项目 3' },
        { text: '项目 4' },
        { text: '项目 5' },
        { text: '项目 6' }
      ]
    }
  }
}
</script>

<style scoped>
/* 网格布局 */
.grid-container {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
}

.grid-item {
  width: calc(33.333% - 20rpx);
  height: 200rpx;
  background-color: #007aff;
  color: #fff;
  margin: 10rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-text {
  font-size: 28rpx;
  font-weight: bold;
}

/* 响应式调整 */
@media screen and (max-width: 750rpx) {
  .grid-item {
    width: calc(50% - 20rpx);
  }
}

@media screen and (max-width: 480rpx) {
  .grid-item {
    width: calc(100% - 20rpx);
  }
}
</style>

2. 流式布局

<template>
  <view class="flow-container">
    <view class="left-side">
      <text class="section-title">左侧内容</text>
      <text class="content">这是左侧内容区域</text>
    </view>
    <view class="right-side">
      <text class="section-title">右侧内容</text>
      <text class="content">这是右侧内容区域</text>
    </view>
  </view>
</template>

<script>
export default {}
</script>

<style scoped>
/* 流式布局 */
.flow-container {
  display: flex;
  padding: 20rpx;
}

.left-side {
  flex: 1;
  background-color: #f0f0f0;
  padding: 20rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.right-side {
  width: 300rpx;
  background-color: #e0e0e0;
  padding: 20rpx;
  border-radius: 8rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.content {
  font-size: 28rpx;
  color: #666;
}

/* 响应式调整 */
@media screen and (max-width: 750rpx) {
  .flow-container {
    flex-direction: column;
  }
  
  .left-side {
    margin-right: 0;
    margin-bottom: 20rpx;
  }
  
  .right-side {
    width: 100%;
  }
}
</style>

学习目标

通过本集的学习，你应该能够：

1. 掌握 uni-app 支持的样式语法，包括普通 CSS、SCSS 和 Less
2. 学会使用条件编译和平台特定样式文件实现多端样式适配
3. 熟悉 rpx 单位的使用方法，实现响应式布局
4. 掌握主题定制的方法，包括 CSS 变量和动态主题切换
5. 能够通过实用案例实现响应式布局，包括网格布局和流式布局

小结

样式开发是 uni-app 开发中的重要部分，合理的样式设计可以使应用界面更加美观和易用。通过本集的学习，你已经掌握了样式语法、多端样式适配、主题定制等核心知识点，并通过实际案例了解了如何实现响应式布局。在后续的开发中，你可以根据实际需求，灵活运用这些知识，构建更加美观和适配多端的应用界面。