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

WXSS样式处理

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


一、尺寸单位

1. rpx(responsive pixel)

  • 定义:微信小程序中的响应式单位,规定屏幕宽度为 750rpx。
  • 换算:在 iPhone6 上,1rpx = 0.5px;在不同设备上自动适配。
  • 适用场景:布局、宽高、边距等。
html 复制代码
<!-- index.wxml -->
<view class="box-rpx">使用 rpx 的盒子</view>
css 复制代码
/* 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。
css 复制代码
/* 修改根字体大小 */
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: ''; }
css 复制代码
/* 选择器示例 */
.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)。
css 复制代码
/* common.wxss */
.text-center {
  text-align: center;
}

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

.page {
  background: #f5f5f5;
}

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


四、内联样式

  • 使用 style 属性直接写在 WXML 元素上。
  • 支持动态绑定(通过 JS 数据)。
html 复制代码
<view style="color: {{ textColor }}; font-size: {{ fontSize }}rpx;">
  动态内联样式
</view>
js 复制代码
// index.js
Page({
  data: {
    textColor: '#e91e63',
    fontSize: 36
  }
})

✅ 优点:灵活;❌ 缺点:难以维护,建议仅用于动态样式。


五、布局基础

1. 盒子模型(Box Model)

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

css 复制代码
.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 在部分机型有兼容问题)。
css 复制代码
.parent {
  position: relative;
  height: 300rpx;
}

.child {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background: #ff9800;
  padding: 10rpx;
}
html 复制代码
<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 单个项目对齐方式
html 复制代码
<view class="flex-container">
  <view class="flex-item">1</view>
  <view class="flex-item">2</view>
  <view class="flex-item">3</view>
</view>
css 复制代码
.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 + 盒子模型)

html 复制代码
<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>
css 复制代码
.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)

html 复制代码
<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>
css 复制代码
.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)

html 复制代码
<view class="grid-container">
  <view class="grid-item" wx:for="{{[1,2,3,4]}}" wx:key="index">Item {{index+1}}</view>
</view>
css 复制代码
.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;
}

以上内容涵盖了 WXSS 核心语法与实战技巧,适用于微信小程序开发中的绝大多数样式场景。建议在实际项目中以 Flex + rpx + 模块化样式 为主架构。

相关推荐
华洛几秒前
聊一下如何稳定的控制大模型的输出格式
前端·产品经理·ai编程
你听得到115 分钟前
卷不动了?我写了一个 Flutter 全链路监控 SDK,从卡顿、崩溃到性能,一次性搞定!
前端·flutter·性能优化
IT_陈寒8 分钟前
Python 3.12震撼发布:5大性能优化让你的代码提速50%,第3点太香了!
前端·人工智能·后端
恋猫de小郭28 分钟前
今年各大厂都在跟进的智能眼镜是什么?为什么它突然就成为热点之一?它是否是机会?
android·前端·人工智能
β添砖java29 分钟前
JS基础Day01
开发语言·javascript·ecmascript
艾小码29 分钟前
从原型到类:JavaScript面向对象编程的终极进化指南
前端·javascript
喵了meme38 分钟前
Linux学习日记6:文件IO与标准IO
linux·c语言·学习
咖啡の猫2 小时前
Vue混入
前端·javascript·vue.js
游戏开发爱好者83 小时前
iOS 混淆工具链实战 多工具组合完成 IPA 混淆与加固 无源码混淆
android·ios·小程序·https·uni-app·iphone·webview
im_AMBER6 小时前
Leetcode 38
笔记·学习·算法·leetcode