当前位置：首页 > news >正文

微信小程序入门学习教程，从入门到精通，WXSS样式处理语法基础(9）

news 2025/10/6 7:14:10

WXSS样式处理

以下是对 WXSS（WeiXin Style Sheets） 中常见样式处理知识点的详细整理，包括语法说明、使用方法以及带有详细注释的示例代码，并在最后提供几个综合性案例。

一、尺寸单位

1. rpx（responsive pixel）

定义：微信小程序中的响应式单位，规定屏幕宽度为 750rpx。
换算：在 iPhone6 上，1rpx = 0.5px；在不同设备上自动适配。
适用场景：布局、宽高、边距等。

<!-- index.wxml -->
<view class="box-rpx">使用 rpx 的盒子</view>

/* index.wxss */
.box-rpx {width: 750rpx;       /* 满屏宽度 */height: 200rpx;      /* 高度为屏幕宽度的 200/750 */background-color: #4CAF50;font-size: 32rpx;    /* 字体大小也推荐用 rpx */
}

2. rem（root em）

定义：相对于根元素（）字体大小的单位。
小程序中：默认 1rem = 16px（可通过 page 样式修改 font-size）。
注意：小程序中较少使用 rem，推荐优先使用 rpx。

/* 修改根字体大小 */
page {font-size: 20px; /* 此时 1rem = 20px */
}.box-rem {width: 10rem;   /* = 200px */height: 5rem;   /* = 100px */background-color: #2196F3;
}

二、选择器

WXSS 支持大部分 CSS 选择器，但不支持部分高级选择器（如 :nth-child）。

选择器类型	说明	示例
`.class`	类选择器	`.btn { color: red; }`
`#id`	ID 选择器（不推荐，因小程序组件作用域限制）	`#header { }`
`element`	元素选择器	`view { }`
`element, element`	并集选择器	`view, text { }`
`element element`	后代选择器	`view text { }`
`::after`, `::before`	伪元素（部分支持）	`.item::after { content: ''; }`

/* 选择器示例 */
.container {padding: 20rpx;
}.container view {margin-top: 10rpx; /* 所有 container 内的 view */
}.highlight,
.emphasis {color: #ff5722;
}

三、样式导入

1. 外联样式导入（@import）

语法：@import "path/to/style.wxss";
位置：必须写在文件顶部。
用途：复用公共样式（如 reset.wxss、common.wxss）。

/* common.wxss */
.text-center {text-align: center;
}/* index.wxss */
@import "./common.wxss";.page {background: #f5f5f5;
}

⚠️ 注意：路径是相对于当前文件的相对路径。

四、内联样式

使用 style 属性直接写在 WXML 元素上。
支持动态绑定（通过 JS 数据）。

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

// index.js
Page({data: {textColor: '#e91e63',fontSize: 36}
})

✅ 优点：灵活；❌ 缺点：难以维护，建议仅用于动态样式。

五、布局基础

1. 盒子模型（Box Model）

WXSS 盒子模型与 CSS 一致：content → padding → border → margin

.box-model {width: 300rpx;height: 200rpx;padding: 20rpx;     /* 内边距 */border: 2rpx solid #333;margin: 30rpx;      /* 外边距 */background-color: #fff;box-sizing: border-box; /* 推荐：包含 border 和 padding 在 width 内 */
}

💡 小程序默认 box-sizing: border-box，但显式声明更安全。

2. 浮动（float）与定位（position）

浮动：小程序中支持 float: left/right，但不推荐，因布局能力弱。
定位：支持 position: static / relative / absolute / fixed（fixed 在部分机型有兼容问题）。

.parent {position: relative;height: 300rpx;
}.child {position: absolute;top: 20rpx;right: 20rpx;background: #ff9800;padding: 10rpx;
}

<view class="parent"><view class="child">绝对定位</view>
</view>

⚠️ 注意：fixed 定位在 iOS 下可能被键盘遮挡，慎用。

3. Flex 布局（重点推荐）

小程序强烈推荐使用 Flex 布局，简洁高效。

容器属性（父元素）：

属性	说明
`display: flex`	启用 Flex
`flex-direction`	主轴方向（row / column）
`justify-content`	主轴对齐（flex-start / center / space-between 等）
`align-items`	交叉轴对齐（center / flex-start / stretch）
`flex-wrap`	是否换行

项目属性（子元素）：

属性	说明
`flex`	缩写：`flex-grow flex-shrink flex-basis`
`align-self`	单个项目对齐方式

<view class="flex-container"><view class="flex-item">1</view><view class="flex-item">2</view><view class="flex-item">3</view>
</view>

.flex-container {display: flex;flex-direction: row;justify-content: space-between; /* 两端对齐 */align-items: center;padding: 20rpx;background: #f0f0f0;
}.flex-item {width: 150rpx;height: 150rpx;background: #9c27b0;color: white;display: flex;justify-content: center;align-items: center;
}

六、本章小结

单位：优先使用 rpx 实现响应式。
选择器：支持常用 CSS 选择器，避免使用不兼容的伪类。
样式组织：公共样式用 @import，动态样式用内联。
布局：强烈推荐 Flex，避免 float 和复杂定位。
盒子模型：理解 box-sizing: border-box 的作用。

七、综合性案例

案例1：商品卡片（Flex + rpx + 盒子模型）

<view class="product-card"><image class="product-img" src="/images/goods.jpg" mode="aspectFill"></image><view class="product-info"><text class="product-title">智能蓝牙耳机</text><text class="product-price">¥299</text><view class="rating"><text>★★★★☆</text></view></view>
</view>

.product-card {display: flex;padding: 20rpx;background: white;margin: 20rpx;border-radius: 16rpx;box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
}.product-img {width: 200rpx;height: 200rpx;border-radius: 12rpx;margin-right: 20rpx;
}.product-info {flex: 1; /* 占据剩余空间 */display: flex;flex-direction: column;justify-content: space-between;
}.product-title {font-size: 32rpx;font-weight: bold;color: #333;
}.product-price {font-size: 36rpx;color: #e91e63;font-weight: bold;
}.rating {font-size: 24rpx;color: #ff9800;
}

案例2：底部导航栏（Fixed + Flex）

<view class="bottom-bar"><view class="bar-item"><text class="icon">🏠</text><text>首页</text></view><view class="bar-item"><text class="icon">🔍</text><text>搜索</text></view><view class="bar-item"><text class="icon">🛒</text><text>购物车</text></view><view class="bar-item"><text class="icon">👤</text><text>我的</text></view>
</view>

.bottom-bar {position: fixed;bottom: 0;left: 0;right: 0;display: flex;justify-content: space-around;align-items: center;height: 100rpx;background: white;border-top: 2rpx solid #eee;z-index: 999;
}.bar-item {display: flex;flex-direction: column;align-items: center;font-size: 24rpx;color: #666;
}.icon {font-size: 36rpx;margin-bottom: 6rpx;
}

💡 注意：使用 fixed 时，页面内容底部需留出空间（如 padding-bottom: 100rpx）。

案例3：响应式网格布局（Flex + rpx）

<view class="grid-container"><view class="grid-item" wx:for="{{[1,2,3,4]}}" wx:key="index">Item {{index+1}}</view>
</view>

.grid-container {display: flex;flex-wrap: wrap;padding: 20rpx;
}.grid-item {width: 345rpx; /* (750 - 20*3) / 2 ≈ 345 */height: 200rpx;margin: 10rpx;background: #e3f2fd;display: flex;justify-content: center;align-items: center;border-radius: 12rpx;
}