微信小程序WXSS开发指南

以下是关于 WXSS（WeiXin Style Sheets） 的开发指南，帮助您更好地理解和使用微信小程序的样式语言。WXSS 基于 CSS，但针对小程序进行了适配和扩展，主要解决移动端屏幕适配问题。

一、WXSS 基础

1. 与 CSS 的差异

O 尺寸单位：WXSS 引入了 rpx（Responsive Pixel），可根据屏幕宽度自适应。

1. 设计稿建议以 750rpx 为基准（1:1 对应 iPhone6 的物理像素 375pt * 2）。
2. 换算公式：1rpx = 屏幕宽度 / 750。

O 样式导入：通过 @import "path/to/style.wxss"; 导入外部样式文件。

O 全局与局部样式：

1. app.wxss 为全局样式，作用于所有页面。
2. 页面内的 .wxss 文件为局部样式，仅作用于当前页面。
3. 选择器

O 支持常用 CSS 选择器，如类选择器 .class、ID 选择器 #id、标签选择器 view 等。

O 不支持 的部分高级选择器（如伪类 :hover、:before、:after 等，但部分组件内置了类似效果）。

二、核心特性

1. rpx 适配

• 使用 rpx 替代 px，避免手动计算不同屏幕的缩放比例。
• 示例：

css

.container {

width: 750rpx; /* 在 iPhone6 下等于 375px */

padding: 20rpx;

}

2. 样式隔离

• 默认情况下，小程序的页面样式相互隔离（组件样式默认隔离更强）。
• 可通过配置修改隔离行为：

json

// 组件的 .json 文件中

{

"styleIsolation": "shared" // 允许页面样式影响组件

}

3. 动态样式

• 通过数据绑定实现动态样式：

html

<view style="color: {{textColor}}; font-size: {{fontSize}}rpx">动态样式</view>

html

<view class="{{isActive ? 'active' : 'inactive'}}">条件样式</view>

三、布局技巧

1. Flex 布局

• 微信小程序推荐使用 Flex 布局实现响应式排版。
• 示例：

css

.container {

display: flex;

flex-direction: row;

justify-content: space-between;

align-items: center;

}

2. 适配不同屏幕

• 使用 rpx 配合媒体查询（Media Query）：

css

/* 在宽度小于 480px 的屏幕上调整样式 */

@media screen and (max-width: 480px) {

.title {

font-size: 28rpx;

}

}

3. 图片适配

• 设置图片宽高为百分比或 rpx，避免固定像素导致变形：

css

.image {

width: 100%;

height: auto;

}

四、最佳实践

1. 避免样式冲突

O 使用命名空间（如 .page-index__container）减少全局样式污染。

O 优先使用类选择器而非标签选择器。

2. 性能优化

O 减少不必要的嵌套层级。

O 避免使用 margin: 0 auto;（优先 Flex 或 Grid 布局）。

3. 复用样式

O 将公共样式（如颜色、字体）定义在 app.wxss 中：

css

:root {

--primary-color: #007aff;

}

.text-primary {

color: var(--primary-color);

}

五、常见问题

1. 样式不生效

O 检查选择器优先级是否被覆盖。

O 确认样式文件路径是否正确，是否被局部样式覆盖。

2. rpx 计算错误

O 确保设计稿宽度为 750rpx，直接按 1:1 转换设计稿标注值。

3. 组件样式隔离

O 若组件样式无法修改，检查是否开启了 styleIsolation 配置。

通过合理使用 WXSS，您可以高效实现微信小程序的界面适配与美化。建议结合微信开发者工具的实时预览功能调试样式，并参考官方文档获取最新特性支持。