微信小程序WXSS 模板样式

一、前言

在微信小程序开发中，WXSS（WeiXin Style Sheets） 是用于描述页面样式的语言，它基于 CSS 并做了扩展和限制，专为小程序设计。

本文将带你全面了解 WXSS 的语法特性和使用技巧，包括：

✅ WXSS 的基本结构与作用
✅ WXSS 与 CSS 的异同
✅ 如何引入样式文件（@import）
✅ 支持的 CSS 选择器与不支持的功能
✅ rpx 单位的使用与响应式布局原理
✅ 全局样式与局部样式
✅ 使用 SCSS/LESS 提高开发效率
✅ 常见样式问题与优化建议

并通过完整的代码示例，帮助你快速上手并熟练使用 WXSS 编写小程序样式。

二、什么是 WXSS？

WXSS（WeiXin Style Sheets） 是微信小程序中用于控制页面外观的样式语言，类似于网页开发中的 CSS，但有其特定的规则和扩展。

✅ 示例：一个简单的 WXSS 文件

/* index.wxss */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<!-- index.wxml -->
<view class="container">
  <text>欢迎来到我的小程序</text>
</view>

三、WXSS 与 CSS 的异同

四、WXSS 的单位 —— rpx

小程序支持一种新的尺寸单位 rpx（responsive pixel），它可以自动根据设备宽度进行适配，使不同设备上的布局保持一致。

✅ 示例：使用 rpx 设置按钮样式

.button {
  width: 600rpx;
  height: 80rpx;
  font-size: 30rpx;
}

💡 在 iPhone6 上，1rpx = 0.5px，系统会自动换算，无需手动计算。

五、样式文件的引入方式

✅ 1. 全局样式（app.wxss）

所有页面都可以使用的样式，适用于通用组件、字体、颜色变量等。

/* app.wxss */
.text-center {
  text-align: center;
}

✅ 2. 页面级样式（index.wxss）

只对当前页面生效，适用于页面专属样式。

/* index.wxss */
.container {
  padding: 20rpx;
}

✅ 3. 组件样式（components/header/header.wxss）

自定义组件样式，只对该组件有效。

✅ 4. 引入外部样式文件（@import）

/* index.wxss */
@import "../common.wxss";

.title {
  color: $primary-color; /* 假设 common.wxss 定义了变量 */
}

六、支持的 CSS 选择器

七、使用 SCSS / LESS 编写更高效的 WXSS

虽然小程序原生不直接支持 SCSS 或 LESS，但我们可以通过构建工具（如 VS Code 插件或 Webpack）将 SCSS 编译为 WXSS。

✅ 示例：SCSS 写法 → 编译成 WXSS

// variables.scss
$primary-color: #4CAF50;

.button {
  background-color: $primary-color;
  &:hover {
    background-color: darken($primary-color, 10%);
  }
}

编译后输出为：

.button {
  background-color: #4CAF50;
}

⚠️ 注意：小程序开发者工具本身不支持 SCSS，需借助第三方插件或构建流程处理。

八、常见样式问题与解决方案

九、WXSS 开发技巧与最佳实践

十、总结对比表：WXSS 支持功能一览

十一、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！