打造个性化小程序：编写样式表让你的程序更出彩！

2024-02-10 15:23:50

前言

在上一篇教程中，我们探讨了在小程序中添加视觉元素。现在，是时候深入了解样式表（WXSS）了，它将赋予我们的欢迎小程序应有的美感。

WXSS 简介

WXSS 是一种 CSS（层叠样式表）方言，用于定义小程序中的样式。它允许你控制各种元素的外观，包括文本大小、颜色、背景和布局。

手把手编写样式表

为了给我们的小程序增添魅力，让我们创建一个 WXSS 文件：

pages/welcome/welcome.wxss

在文件中，我们可以使用以下规则：

.container {
  background-color: #fff;
  padding: 20px;
}

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

.image {
  width: 200px;
  height: 200px;
}

这些规则将：

为 "container" 类设置白色背景和填充
将 "title" 类文本设置为粗体、32 像素字号，并采用深灰色
调整 "image" 类的图像大小为 200x200 像素

应用样式

要将这些样式应用到我们的欢迎小程序，我们需要在组件中引用它们。在 pages/welcome/welcome.js 中，我们将：

import { StyleSheet } from '@tarojs/taro';

...

const styles = StyleSheet.create({
  container: {
    ...
  },
  title: {
    ...
  },
  image: {
    ...
  },
});

然后，在小程序模板中，我们可以使用 class 属性：

<view class="{{ styles.container }}">
  <text class="{{ styles.title }}">欢迎</text>
  <image class="{{ styles.image }}" src="./images/logo.png" />
</view>