---

前言

在小程序开发过程中，UI的统一性、代码的可维护性以及开发效率往往成为开发者们关注的重点。对于样式文件，如何设计出一套高效、复用性强的公共样式是关键。本文旨在帮助开发者了解小程序中如何合理进行样式抽离与优化，通过建立一套完整的公共样式文件，极大提升开发效率，保证项目的美观与一致性。

---

一、什么是小程序公共样式

公共样式是一套可以在整个项目中复用的样式规则。其目的是将常用的样式抽离出来，避免重复书写，同时保持界面风格的一致性。这些样式通常用于定义常见的UI组件（如按钮、图片、文本等）的样式规则。

二、为什么要进行样式抽离

2.1 提高开发效率

公共样式文件可以减少重复代码的编写，开发者只需引入和调用，便能在不同组件中快速应用。

2.2 保持一致性

使用统一的样式有助于保持整个项目的视觉一致性，避免不同页面样式各异的问题

2.3 降低维护成本

当需要修改样式时，开发者只需更新公共样式文件，所有引用的地方都会自动更新，降低维护难度。

三、小程序公共样式的基本结构

在小程序中，有很多常见的样式可以进行抽离。根据开发过程中最常使用的UI元素，我们可以将公共样式大致分为以下几类：

3.1 文本样式

文本样式涉及到字体大小、颜色、行高、文本省略等，公共样式的抽离可以涵盖常见的标题、正文、辅助文字等。

/* 标题与正文样式 */
.text-title {
  font-size: 32rpx;
  font-weight: bold;
}

.text-body {
  font-size: 24rpx;
  line-height: 1.5;
}

/* 文本省略样式 */
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制为3行 */
  overflow: hidden;
}

3.2 图片样式

图片的显示方式多样，例如全宽显示、圆角处理等，抽离图片样式可以统一图像在不同组件中的呈现效果。

/* 图片样式 */
.img-full {
  width: 100%;
  height: auto;
}

.img-rounded {
  border-radius: 12rpx;
}

3.3 按钮样式

按钮作为重要的交互元素，其样式应根据不同状态（如普通、禁用、激活等）进行抽离，统一项目中的按钮样式。

/* 按钮样式 */
.btn-primary {
  background-color: #1aad19;
  color: white;
  padding: 16rpx;
  border-radius: 8rpx;
}

.btn-disabled {
  background-color: #ccc;
  color: #999;
}

3.4 间距样式

为保持统一的布局风格，可以将常见的内外边距抽离为通用样式，便于不同组件间的应用。

/* 内外边距样式 */
.margin-md {
  margin: 16rpx;
}

.padding-md {
  padding: 16rpx;
}

3.5 背景与字体颜色

常用的背景色、字体颜色等样式可以通过公共样式文件进行定义，统一项目的色彩风格。

/* 背景色与字体颜色 */
.bg-primary {
  background-color: #1aad19;
}

.text-white {
  color: white;
}

3.6 动画效果

常见的过渡效果和动画可以定义为公共样式，提高用户交互体验。

/* 动画效果 */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

3.7 布局样式

定义flex、grid等布局样式，便于构建灵活的页面结构。

/* 布局样式 */
.flex {
  display: flex;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

四、公共样式的使用方法

4.1 创建公共样式文件

创建一个 common.scss 文件，将所有公共样式放置其中，方便后续引入使用。

4.2 引入公共样式

在需要应用样式的页面或组件中通过 @import 引入公共样式：

@import "/path/to/common.scss";

4.3 应用公共样式

在 .wxml 文件中，通过 class 属性引用公共样式类名：

<view class="text-title">标题内容</view>
<image class="img-rounded" src="/path/to/image.png"></image>
<button class="btn-primary">点击按钮</button>

五、编写公共样式时的注意事项

1.	命名规范：命名应尽量简洁、明了，并遵循驼峰命名或下划线命名法，避免命名冲突。
2.	响应式设计：在小程序中尽量使用 rpx 作为单位，确保在不同屏幕尺寸下样式适配良好。
3.	模块化管理：将不同功能模块的样式拆分成多个文件，按需引入，保证样式文件的简洁和可维护性。

六、完整的公共样式代码

/* 公共文本样式 */
.text-title {
  font-size: 32rpx;
  font-weight: bold;
}

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

.text-body {
  font-size: 24rpx;
  line-height: 1.5;
}

.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 公共图片样式 */
.img-full {
  width: 100%;
  height: auto;
}

.img-rounded {
  border-radius: 12rpx;
}

/* 公共按钮样式 */
.btn-primary {
  background-color: #1aad19;
  color: white;
  padding: 16rpx;
  border-radius: 8rpx;
}

.btn-disabled {
  background-color: #ccc;
  color: #999;
}

/* 公共间距样式 */
.padding-md {
  padding: 16rpx;
}

.margin-md {
  margin: 16rpx;
}

/* 背景色与字体颜色 */
.bg-primary {
  background-color: #1aad19;
}

.text-white {
  color: white;
}

/* 动画效果 */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 布局样式 */
.flex {
  display: flex;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

七、总结

在小程序开发中，通过抽离常见的样式来构建一套可复用的公共样式，不仅能提高开发效率，还能统一项目的视觉效果和用户体验。无论是字体样式、按钮样式、还是动画效果，都可以通过精心设计的公共样式文件得到良好的抽象。希望本文所提供的公共样式代码能为开发者在日常开发中提供有力的帮助。