面向零基础初学者，从环境搭建到发布上线，手把手教你开发第一个微信小程序（第5章-WXSS入门）

5.1 WXSS是什么WXSSWeiXin Style Sheets是微信小程序的样式语言类似于网页开发中的CSS。WXSS vs CSS对比CSSWXSS选择器支持完整选择器支持大部分选择器单位px, em, remrpx, px布局flex, grid主要用flex最大的区别WXSS新增了rpx单位专为适配不同屏幕尺寸设计。5.2 rpx尺寸单位rpxresponsive pixel是微信小程序推出的响应式单位。工作原理设计师通常以 iPhone 6 为基准设计宽度750px1rpx 0.5px在iPhone 6上换算规则750rpx 屏幕宽度换算对照表设备屏幕宽度1rpx ? pxiPhone 5320px0.5pxiPhone 6375px0.5pxiPhone X414px0.552pxiPad768px1px使用建议配图位置images/ch05/ch05_01_rpx_rule.png标注750rpx 屏幕宽度什么时候用 rpx容器宽度、间距、字体大小等大部分场景保持比例缩放什么时候用 px边框宽度通常1px非常精细的微调/* 建议使用 rpx */.container{width:750rpx;/* 满屏宽度 */padding:20rpx;/* 内边距 */font-size:28rpx;/* 字体大小 */}/* 通常使用 px */.separator{height:1px;/* 边框用px */}5.3 选择器WXSS支持的选择器常用选择器选择器示例说明.class.container类选择器#id#usernameID选择器不推荐elementview标签选择器element,elementview,text多元素选择器.parent .child.card .title后代选择器.parent .child.list .item子选择器选择器优先级同CSS优先级由高到低!important 行内样式 #id .class element示例/* 标签选择器 */view{box-sizing:border-box;}/* 类选择器 */.container{padding:20rpx;}/* 后代选择器 */.card .title{font-size:32rpx;font-weight:bold;}/* 多元素选择 */page, view, text{font-family:-apple-system;}5.4 Flex布局Flex弹性盒模型是WXSS中最常用的布局方式。基本概念┌─────────────────────────────────────┐ │ flex container │ │ ┌─────┐ ┌─────┐ ┌─────┐ │ │ │item1│ │item2│ │item3│ │ │ └─────┘ └─────┘ └─────┘ │ └─────────────────────────────────────┘display: flex- 开启弹性布局flex-direction- 主轴方向justify-content- 主轴对齐align-items- 交叉轴对齐常用属性1. flex-direction - 主轴方向.container{display:flex;flex-direction:row;/* 水平默认 *//* flex-direction: column; 垂直 */}2. justify-content - 主轴对齐.container{display:flex;justify-content:flex-start;/* 左对齐默认 *//* justify-content: center; 居中 *//* justify-content: flex-end; 右对齐 *//* justify-content: space-between; 两端对齐 *//* justify-content: space-around; 等距分布 */}3. align-items - 交叉轴对齐.container{display:flex;align-items:stretch;/* 拉伸默认 *//* align-items: flex-start; 顶部对齐 *//* align-items: center; 居中对齐 *//* align-items: flex-end; 底部对齐 */}4. flex-wrap - 换行.container{display:flex;flex-wrap:nowrap;/* 不换行默认 *//* flex-wrap: wrap; 换行 */}5. flex - 份数分配.box{flex:1;/* 平分剩余空间 */}.golden{flex:2;/* 占2份 */}.silver{flex:1;/* 占1份 */}/* golden 和 silver 的比例是 2:1 */5.5 实战居中布局水平垂直居中.center-box{display:flex;justify-content:center;/* 水平居中 */align-items:center;/* 垂直居中 */}### 底部固定按钮 css .fixed-bottom{position:fixed;bottom:0;left:0;right:0;padding:20rpx 30rpx;}5.6 常用样式属性文本样式.text{font-size:28rpx;/* 字体大小 */color:#333333;/* 文字颜色 */font-weight:bold;/* 字体粗细 */text-align:center;/* 文本对齐 */line-height:1.5;/* 行高 */}背景与边框.box{background-color:#ffffff;/* 背景色 */border-radius:16rpx;/* 圆角 */border:1rpx solid #e0e0e0;/* 边框 */}内边距与外边距.box{padding:20rpx;/* 内边距四周 */padding:20rpx 30rpx;/* 上下20rpx左右30rpx */padding-top:20rpx;/* 单边设置 */margin:20rpx;/* 外边距四周 */}标注padding 和 margin 的区别盒模型┌─────────────────────────┐ │ margin │ │ ┌───────────────────┐ │ │ │ border │ │ │ │ ┌─────────────┐ │ │ │ │ │ padding │ │ │ │ │ │ ┌───────┐ │ │ │ │ │ │ │content│ │ │ │ │ │ │ └───────┘ │ │ │ │ │ └─────────────┘ │ │ │ └───────────────────┘ │ └─────────────────────────┘/* 设置盒模型为 border-box */*{box-sizing:border-box;}5.7 全局样式与局部样式app.wxss - 全局样式在app.wxss中定义的样式所有页面都生效/* app.wxss */page{background-color:#f5f5f5;/* 所有页面背景色 */font-size:28rpx;/* 所有页面字体大小 */}页面样式 - index.wxss在单个页面的.wxss文件中定义的样式只对该页面生效/* pages/index/index.wxss */.container{padding:20rpx;}样式覆盖如果页面样式和全局样式冲突页面样式会覆盖全局样式。5.8 实战短信生成器样式/* pages/index/index.wxss *//* 页面容器 */.container{min-height:100vh;background-color:#f5f5f5;padding:20rpx;}/* 卡片 */.card{background-color:#ffffff;border-radius:16rpx;padding:30rpx;margin-bottom:20rpx;}/* 类型标签容器 */.type-tabs{display:flex;flex-wrap:wrap;}/* 类型标签 */.type-tab{flex:1;min-width:45%;padding:20rpx;margin:10rpx;border-radius:12rpx;border:2rpx solid #e0e0e0;text-align:center;}.type-tab.active{border-color:#1890ff;background-color:#e6f7ff;}/* 输入框 */.input-field{width:100%;padding:20rpx;border:1rpx solid #d9d9d9;border-radius:8rpx;font-size:28rpx;}.input-field-placeholder{color:#bfbfbf;}/* 主按钮 */.btn-primary{width:100%;height:88rpx;background-color:#1890ff;color:#ffffff;border-radius:44rpx;font-size:32rpx;display:flex;align-items:center;justify-content:center;} - 标注各样式效果预览 --- ## 5.9 本章小结 ✅ 理解了WXSS与CSS的区别 ✅ 掌握了rpx响应式单位的使用 ✅ 学会了5种常用选择器 ✅ 掌握了Flex布局的6个核心属性 ✅ 理解了全局样式与局部样式的区别