微信小程序开发——第三章：WXML 与 WXSS —— 小程序页面结构与样式设计
目录
第3章：WXML 与 WXSS —— 小程序页面结构与样式设计
3.1 WXML 概述
什么是 WXML
基本语法示例
3.2 常用 WXML 标签
示例：创建一个简单信息展示页
3.3 数据绑定（Data Binding）
单向数据绑定
属性绑定
3.4 条件渲染
3.5 列表渲染（循环）
3.6 模板（template）
定义模板
使用模板
3.7 WXSS 概述
什么是 WXSS
WXSS 与 CSS 的区别
3.8 rpx 单位（响应式单位）
示例：
3.9 常用 WXSS 样式属性
3.10 Flex 弹性布局（重点）
示例：水平居中布局
示例：横向排列
3.11 样式继承与作用范围
3.12 页面案例：个人信息展示页
3.13 本章小结
学完本章后，你应当能够...
第3章：WXML 与 WXSS —— 小程序页面结构与样式设计
这一章相当于学习网页开发中的 HTML + CSS，
是构建小程序界面的核心基础。
掌握好这一章，你就能独立设计出整洁、美观、规范的小程序页面。
3.1 WXML 概述
什么是 WXML
WXML（WeiXin Markup Language） 是微信小程序的标记语言，
用于描述页面的结构和内容。
它的语法与 HTML 类似，但更简洁、语义更清晰。
WXML 主要作用：
-
构建页面的结构（布局层次）
-
使用数据绑定显示动态数据
-
使用条件和循环指令渲染不同内容
基本语法示例
<view class="container"><text>Hello 小程序</text><button bindtap="onClick">点击我</button>
</view>
view相当于 HTML 中的div，是小程序的通用容器标签。
bindtap表示点击事件绑定，点击时会触发对应的函数。
3.2 常用 WXML 标签
| 标签 | 作用 | 示例 |
|---|---|---|
<view> | 页面容器，用于布局 | <view>内容</view> |
<text> | 文本显示 | <text>你好</text> |
<image> | 显示图片 | <image src="xxx.png"/> |
<button> | 按钮 | <button>提交</button> |
<input> | 输入框 | <input placeholder="请输入内容"/> |
<scroll-view> | 可滚动区域 | <scroll-view scroll-y="true">内容</scroll-view> |
<navigator> | 页面跳转 | <navigator url="/pages/detail/detail">详情</navigator> |
示例：创建一个简单信息展示页
<view class="user-info"><image class="avatar" src="/images/avatar.png"></image><text class="username">古文杰</text><button bindtap="follow">关注我</button>
</view>
3.3 数据绑定（Data Binding）
WXML 支持数据与逻辑层（JS文件）之间的动态绑定。
单向数据绑定
<text>{{username}}</text>
Page({data: {username: '顾欢'}
})
当你调用 this.setData() 修改数据时，页面会自动刷新。
this.setData({username: 'WegJ Go'
})
属性绑定
可以绑定变量到属性值上：
<image src="{{imgUrl}}"></image>
Page({data: {imgUrl: '/images/photo.jpg'}
})
3.4 条件渲染
使用 wx:if、wx:elif、wx:else 控制内容是否显示。
<view wx:if="{{isLogin}}">欢迎回来！</view>
<view wx:else>请先登录</view>
Page({data: {isLogin: false}
})
3.5 列表渲染（循环）
使用 wx:for 渲染数组列表：
<view wx:for="{{students}}" wx:key="id">{{index + 1}}. {{item.name}}
</view>
Page({data: {students: [{ id: 1, name: '啊' },{ id: 2, name: '我' },{ id: 3, name: '呃' }]}
})
wx:key是每个元素的唯一标识，建议写上。
3.6 模板（template）
当多个页面使用相同结构时，可以抽取成模板文件。
定义模板
<!-- template/user.wxml -->
<template name="userCard"><view class="user-card"><text>{{name}}</text><text>{{email}}</text></view>
</template>
使用模板
<import src="/template/user.wxml"/>
<template is="userCard" data="{{...user}}"/>
Page({data: {user: { name: 'abc', email: 'wegj@example.com' }}
})
3.7 WXSS 概述
什么是 WXSS
WXSS（WeiXin Style Sheets） 是小程序的样式语言，
用于描述页面的视觉样式，与 CSS 相似，但有增强特性。
WXSS 与 CSS 的区别
| 对比点 | WXSS | CSS |
|---|---|---|
| 尺寸单位 | rpx（自适应） | px |
| 全局样式 | app.wxss | 不区分全局或局部 |
| 局部样式 | 页面独立 .wxss 文件 | 通过选择器 |
| 支持性 | 无伪类、无动画支持限制 | 完整CSS标准 |
3.8 rpx 单位（响应式单位）
rpx 是小程序独有的单位，表示“响应像素”，会随设备宽度自适应。
在 iPhone6（宽度750px）上：
1rpx = 1px
在更宽的设备上，rpx 会自动按比例放大。
推荐：设计稿以 750px 为标准（常见的UI尺寸）
示例：
.image {width: 200rpx;height: 200rpx;border-radius: 100rpx;
}
这会在不同屏幕上自动等比例缩放。
3.9 常用 WXSS 样式属性
| 分类 | 常用属性 |
|---|---|
| 布局 | display, flex, justify-content, align-items |
| 字体 | font-size, color, font-weight |
| 背景 | background-color, background-image |
| 边框 | border, border-radius |
| 间距 | margin, padding |
| 定位 | position, top, left, z-index |
3.10 Flex 弹性布局（重点）
小程序强烈推荐使用 Flex 布局。
示例：水平居中布局
<view class="container"><text>居中内容</text>
</view>
.container {display: flex;justify-content: center;align-items: center;height: 400rpx;background-color: #f2f2f2;
}
示例：横向排列
<view class="row"><view class="box red"></view><view class="box blue"></view><view class="box green"></view>
</view>
.row {display: flex;flex-direction: row;
}
.box {width: 100rpx;height: 100rpx;margin: 10rpx;
}
.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
3.11 样式继承与作用范围
-
全局样式：
app.wxss
所有页面都会生效。 -
局部样式： 每个页面的
.wxss文件
仅对当前页面生效。
局部样式会覆盖全局样式中相同选择器的样式。
3.12 页面案例：个人信息展示页
<!-- pages/profile/profile.wxml -->
<view class="profile"><image class="avatar" src="/images/avatar.png"></image><text class="name">{{user.name}}</text><text class="major">{{user.major}}</text><button bindtap="showInfo">查看详情</button>
</view>
/* pages/profile/profile.wxss */
.profile {display: flex;flex-direction: column;align-items: center;margin-top: 100rpx;
}
.avatar {width: 200rpx;height: 200rpx;border-radius: 100rpx;
}
.name {font-size: 36rpx;margin-top: 20rpx;
}
.major {font-size: 28rpx;color: #888;
}
button {margin-top: 30rpx;background-color: #1aad19;color: white;
}
// pages/profile/profile.js
Page({data: {user: {name: 'wenjgo',major: '软件工程'}},showInfo() {wx.showModal({title: '个人简介',content: 'aaa，软件工程专业学生，热爱编程与AI。',showCancel: false})}
})
3.13 本章小结
| 内容 | 要点 |
|---|---|
| WXML | 小程序的结构语言，类似HTML |
| WXSS | 小程序的样式语言，类似CSS |
| rpx单位 | 自适应不同设备屏幕宽度 |
| 数据绑定 | 通过 {{}} 实现动态显示 |
| 条件与循环 | 使用 wx:if、wx:for 实现逻辑控制 |
| Flex布局 | 小程序中最推荐的布局方式 |
学完本章后，你应当能够....
-
使用 WXML 设计页面结构
-
使用 WXSS 控制页面样式与布局
-
掌握 rpx 响应式设计
-
实现简单的数据绑定、条件与循环渲染