微信小程序开发——第三章：WXML 与 WXSS —— 小程序页面结构与样式设计

[第3章：WXML 与 WXSS ------ 小程序页面结构与样式设计](#第3章：WXML 与 WXSS —— 小程序页面结构与样式设计)

[3.1 WXML 概述](#3.1 WXML 概述)

[什么是 WXML](#什么是 WXML)

基本语法示例

[3.2 常用 WXML 标签](#3.2 常用 WXML 标签)

示例：创建一个简单信息展示页

[3.3 数据绑定（Data Binding）](#3.3 数据绑定（Data Binding）)

单向数据绑定

属性绑定

[3.4 条件渲染](#3.4 条件渲染)

[3.5 列表渲染（循环）](#3.5 列表渲染（循环）)

[3.6 模板（template）](#3.6 模板（template）)

定义模板

使用模板

[3.7 WXSS 概述](#3.7 WXSS 概述)

[什么是 WXSS](#什么是 WXSS)

[WXSS 与 CSS 的区别](#WXSS 与 CSS 的区别)

[3.8 rpx 单位（响应式单位）](#3.8 rpx 单位（响应式单位）)

示例：

[3.9 常用 WXSS 样式属性](#3.9 常用 WXSS 样式属性)

[3.10 Flex 弹性布局（重点）](#3.10 Flex 弹性布局（重点）)

示例：水平居中布局

示例：横向排列

[3.11 样式继承与作用范围](#3.11 样式继承与作用范围)

[3.12 页面案例：个人信息展示页](#3.12 页面案例：个人信息展示页)

[3.13 本章小结](#3.13 本章小结)

学完本章后，你应当能够...

第3章：WXML 与 WXSS ------ 小程序页面结构与样式设计

这一章相当于学习网页开发中的 HTML + CSS ，

是构建小程序界面的核心基础 。

掌握好这一章，你就能独立设计出整洁、美观、规范的小程序页面。

3.1 WXML 概述

什么是 WXML

WXML（WeiXin Markup Language） 是微信小程序的标记语言，

用于描述页面的结构和内容。

它的语法与 HTML 类似，但更简洁、语义更清晰。

WXML 主要作用：

构建页面的结构（布局层次）
使用数据绑定显示动态数据
使用条件和循环指令渲染不同内容

基本语法示例

html 复制代码

<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>`

示例：创建一个简单信息展示页

html 复制代码

<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文件）之间的动态绑定。

单向数据绑定

html 复制代码

<text>{{username}}</text>

html 复制代码

Page({
  data: {
    username: '顾欢'
  }
})

当你调用 this.setData() 修改数据时，页面会自动刷新。

html 复制代码

this.setData({
  username: 'WegJ Go'
})

属性绑定

可以绑定变量到属性值上：

html 复制代码

<image src="{{imgUrl}}"></image>

html 复制代码

Page({
  data: {
    imgUrl: '/images/photo.jpg'
  }
})

3.4 条件渲染

使用 wx:if、wx:elif、wx:else 控制内容是否显示。

html 复制代码

<view wx:if="{{isLogin}}">欢迎回来！</view>
<view wx:else>请先登录</view>

html 复制代码

Page({
  data: {
    isLogin: false
  }
})

3.5 列表渲染（循环）

使用 wx:for 渲染数组列表：

html 复制代码

<view wx:for="{{students}}" wx:key="id">
  {{index + 1}}. {{item.name}}
</view>

html 复制代码

Page({
  data: {
    students: [
      { id: 1, name: '啊' },
      { id: 2, name: '我' },
      { id: 3, name: '呃' }
    ]
  }
})

wx:key 是每个元素的唯一标识，建议写上。

3.6 模板（template）

当多个页面使用相同结构时，可以抽取成模板文件。

定义模板

python 复制代码

<!-- template/user.wxml -->
<template name="userCard">
  <view class="user-card">
    <text>{{name}}</text>
    <text>{{email}}</text>
  </view>
</template>

使用模板

html 复制代码

<import src="/template/user.wxml"/>
<template is="userCard" data="{{...user}}"/>

html 复制代码

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）上：

html 复制代码

1rpx = 1px

在更宽的设备上，rpx 会自动按比例放大。

推荐：设计稿以 750px 为标准（常见的UI尺寸）

示例：

css 复制代码

.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 布局。

示例：水平居中布局

html 复制代码

<view class="container">
  <text>居中内容</text>
</view>

css 复制代码

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;
  background-color: #f2f2f2;
}

示例：横向排列

html 复制代码

<view class="row">
  <view class="box red"></view>
  <view class="box blue"></view>
  <view class="box green"></view>
</view>

css 复制代码

.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 页面案例：个人信息展示页

html 复制代码

<!-- 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>

css 复制代码

/* 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;
}

复制代码

javascript 复制代码

// 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 响应式设计
实现简单的数据绑定、条件与循环渲染