微信小程序文件结构

微信小程序的文件组成和作用

问题

微信小程序有几个文件？各自的作用是什么？

解答

微信小程序主要由 全局文件 和 页面文件 组成。

全局文件（3 个必需）

位于项目根目录：

文件必需作用
app.js是小程序入口，注册 App 实例
app.json是全局配置（页面路径、窗口样式等）
app.wxss否全局样式
// app.js
App({
  onLaunch() {
    // 小程序启动时执行
    console.log('小程序启动')
  },
  globalData: {
    userInfo: null
  }
})
// app.json
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "小程序",
    "navigationBarBackgroundColor": "#ffffff"
  }
}

页面文件（每个页面 4 个）

每个页面由同名的 4 个文件组成：

文件必需作用
.wxml是页面结构（类似 HTML）
.js是页面逻辑
.json否页面配置（覆盖全局配置）
.wxss否页面样式（仅作用于当前页面）
<!-- pages/index/index.wxml -->
<view class="container">
  <text>{{message}}</text>
  <button bindtap="handleTap">点击</button>
</view>
// pages/index/index.js
Page({
  data: {
    message: 'Hello World'
  },
  handleTap() {
    this.setData({
      message: '你点击了按钮'
    })
  }
})
// pages/index/index.json
{
  "navigationBarTitleText": "首页"
}
/* pages/index/index.wxss */
.container {
  padding: 20rpx;
}

项目配置文件

文件作用
project.config.json开发工具配置
sitemap.json小程序搜索配置

典型项目结构

├── app.js                 # 全局逻辑
├── app.json               # 全局配置
├── app.wxss               # 全局样式
├── project.config.json    # 项目配置
├── sitemap.json           # 搜索配置
└── pages/
    └── index/
        ├── index.wxml     # 页面结构
        ├── index.js       # 页面逻辑
        ├── index.json     # 页面配置
        └── index.wxss     # 页面样式

关键点

  • 全局文件 3 个：app.js、app.json、app.wxss
  • 页面文件 4 个：.wxml、.js、.json、.wxss，文件名必须相同
  • .wxml 是小程序的模板语言，类似 HTML 但使用小程序组件
  • .wxss 是样式文件，支持 rpx 响应式单位
  • 页面的 .json 配置会覆盖 app.json 中的 window 配置
微信小程序事件传值 微信小程序的架构

目录