微信小程序页面结构到底是什么？一文讲透 wxml/wxss/js/json-小程序开发日志

很多刚接触小程序的新手，打开项目文件夹第一眼都会懵：怎么一个页面有 4 个文件？它们分别是干嘛的？和我知道的 HTML/CSS/JS 有什么区别？本文用最通俗的话讲透小程序页面结构，看完就能上手写页面。

一、先搞懂：小程序的整体项目结构

在讲单个页面前，先快速认识小程序根目录的核心文件，它们是整个小程序的 “总开关”：

表格

文件名	作用	类比网页开发
`app.js`	小程序全局逻辑入口，处理小程序启动、全局状态	全局 JS 文件
`app.json`	小程序全局配置，管理所有页面路径、导航栏样式、底部 tab	网站的全局配置文件
`app.wxss`	小程序全局样式，所有页面通用的样式写在这里	全局 CSS 文件
`pages/` 文件夹	存放所有小程序页面，每个页面单独一个子文件夹	网站的页面文件夹
`project.config.json`	开发者工具的项目配置，记录 AppID、编译设置等	项目环境配置

核心规则：你新建的每一个页面，都必须在 app.json 的 pages 数组里登记路径，否则小程序找不到这个页面。数组里的第一个路径，就是小程序打开时的默认首页。

二、拆解：一个页面的 4 个核心文件

小程序官方规定，每一个页面必须放在单独的文件夹里，且由 4 个同名文件组成，分别负责「结构、样式、逻辑、配置」，缺一不可。

比如首页 index 页面，就对应 4 个文件：index.wxml、index.wxss、index.js、index.json。

1. WXML：页面的骨架结构（对应网页的 HTML）

全称：WeiXin Markup Language（微信标记语言）
核心作用：定义页面里有什么元素、元素怎么排列，相当于页面的 “骨架”
和 HTML 的核心区别：
- 标签名不一样：HTML 用 div、span、img、a，小程序用 view、text、image、navigator
- 自带模板语法：支持数据绑定、条件渲染、列表循环，和 Vue 语法类似
- 不能写浏览器标签：比如 <html>、<body>、<script> 都不能用

举个最简单的例子：

wxml

<!-- 这是 wxml，负责页面结构 -->
<view class="user-card">
  <text class="name">{{userName}}</text>
  <image class="avatar" src="{{avatarUrl}}"></image>
</view>

你可以把 view 理解成 HTML 里的 div（容器），text 理解成 span（文字），image 理解成 img（图片），上手成本非常低。

2. WXSS：页面的外观样式（对应网页的 CSS）

全称：WeiXin Style Sheets（微信样式表）
核心作用：定义页面元素的颜色、大小、间距、排版，相当于给骨架 “穿衣服”
和 CSS 的核心区别：
- 新增了 rpx 尺寸单位：小程序专属响应式单位，会根据屏幕宽度自动适配，不用自己写移动端适配
- 选择器支持有限：只支持类选择器、标签选择器、后代选择器，不支持通配符 *、ID 选择器也不推荐用
- 样式默认局部生效：每个页面的 wxss 只影响当前页面，不会污染其他页面

对应上面 wxml 的样式示例：

wxss

/* 这是 wxss，负责页面样式 */
.user-card {
  padding: 30rpx;
  background: #fff;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
}
.name {
  font-size: 32rpx;
  color: #333;
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

3. JS：页面的逻辑交互（对应网页的 JavaScript）

核心作用：定义页面的数据、用户点击后的反应、网络请求、数据处理，是页面的 “大脑”
和网页 JS 的核心区别：
- 运行环境不同：小程序运行在微信内核里，没有浏览器的 window、document 对象，不能操作 DOM
- 有固定的页面生命周期：比如页面加载 onLoad、页面显示 onShow、页面隐藏 onHide
- 数据驱动视图：修改 data 里的数据，页面会自动更新，不用手动改元素内容

对应上面页面的 JS 示例：

运行

// 这是 js，负责页面逻辑和数据
Page({
  // 页面初始数据
  data: {
    userName: "小程序开发者",
    avatarUrl: "/images/avatar.png"
  },

  // 页面加载时触发
  onLoad() {
    console.log("页面加载完成了")
  },

  // 自定义方法：比如点击按钮触发
  changeName() {
    this.setData({
      userName: "新的名字"
    })
  }
})

新手重点记住：修改页面数据必须用 this.setData()，直接改 this.data.xxx 不会更新页面显示。

4. JSON：页面的配置文件

核心作用：单独设置当前页面的导航栏标题、颜色、是否开启下拉刷新等，优先级比全局 app.json 高
注意：JSON 文件里只能写配置，不能写逻辑、不能写注释，格式要求非常严格，不能多逗号、少引号

最简单的页面配置示例：

json

{
  "navigationBarTitleText": "个人中心",
  "navigationBarBackgroundColor": "#07c160",
  "navigationBarTextStyle": "white",
  "enablePullDownRefresh": true
}

这段配置的效果是：当前页面顶部导航栏是绿色背景、白色文字，标题为 “个人中心”，并且支持下拉刷新。

三、直观案例：4 个文件如何配合工作

我们做一个「点击按钮，文字自动切换」的小功能，完整展示 4 个文件的协作逻辑。

1. index.wxml（结构）

wxml

<view class="box">
  <text class="text">{{message}}</text>
  <button bindtap="changeMessage">点我切换文字</button>
</view>

用 {{message}} 绑定 JS 里的数据
用 bindtap 给按钮绑定点击事件，触发 JS 里的 changeMessage 方法

2. index.wxss（样式）

wxss

.box {
  padding: 100rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40rpx;
}
.text {
  font-size: 36rpx;
  color: #333;
}

给容器设置居中布局
给文字设置字号和颜色

3. index.js（逻辑）

运行

Page({
  data: {
    message: "初始文字"
  },

  changeMessage() {
    this.setData({
      message: "文字被切换啦！"
    })
  }
})

页面初始数据里，message 是 “初始文字”
用户点击按钮后，执行 changeMessage 方法，更新 message 的值
数据更新后，wxml 里的文字会自动变化

4. index.json（配置）

json

{
  "navigationBarTitleText": "交互演示"
}

单独给这个页面设置导航栏标题

四、新手必记的核心规则

文件名必须一致：同一个页面的 4 个文件必须同名，放在同一个文件夹里，比如 pages/home/home.wxml
页面必须在 app.json 注册：新增页面后，一定要在 app.json 的 pages 数组里添加路径，否则页面无法访问
标签不能混用：不要把 HTML 的标签（比如 div、span）写到 wxml 里，会报错不显示
样式不全局污染：当前页面的 wxss 只作用于当前页面，全局样式写在根目录的 app.wxss 里

文章版权归作者所有，未经允许请勿转载。

THE END

未分类