微信小程序文件结构示例

微信小程序文件结构示例

miniprogram
│
├── app.js // 小程序逻辑
├── app.json // 全局配置
├── app.wxss // 全局样式
│
├── pages // 页面文件夹
│ ├── index // 首页
│ │ ├── index.js // 页面逻辑
│ │ ├── index.json // 页面配置
│ │ ├── index.wxml // 页面结构
│ │ └── index.wxss // 页面样式
│ │
│ ├── logs // 日志页
│ │ ├── logs.js // 页面逻辑
│ │ ├── logs.json // 页面配置
│ │ ├── logs.wxml // 页面结构
│ │ └── logs.wxss // 页面样式
│ │
│ └── … // 其他页面文件夹和文件
│
├── components // 组件文件夹
│ ├── header // 自定义头部组件
│ │ ├── header.js // 组件逻辑
│ │ ├── header.json // 组件配置
│ │ ├── header.wxml // 组件结构
│ │ └── header.wxss // 组件样式
│ │
│ └── … // 其他组件文件夹和文件
│
├── images // 图片资源文件夹
│ ├── icon.png
│ └── …
│
└── utils // 工具类文件夹
├── util1.js // 工具函数1
├── util2.js // 工具函数2
└── …

文件结构说明：

根目录文件：
app.js: 小程序的全局逻辑文件。
app.json: 小程序的全局配置，如页面路径、窗口样式、导航条样式等。
app.wxss: 小程序的全局样式表，定义全局样式。
页面目录 (pages)：
每个页面以文件夹形式存在，包含页面的逻辑、配置、结构和样式文件。

index/: 首页的文件夹，包含首页的逻辑 (index.js)、配置 (index.json)、结构 (index.wxml) 和样式 (index.wxss) 文件。
logs/: 示例中的另一个页面，同样包含逻辑、配置、结构和样式文件。
组件目录 (components)：
可复用的组件文件夹，每个组件以文件夹形式存在，包含组件的逻辑、配置、结构和样式文件。

header/: 自定义头部组件的文件夹，包含逻辑 (header.js)、配置 (header.json)、结构 (header.wxml) 和样式 (header.wxss) 文件。
资源文件夹 (images)：
存放小程序使用的图片资源文件。

工具类文件夹 (utils)：
存放工具函数，如常用的 JavaScript 函数，以便在小程序中复用。

这种文件结构能够使小程序项目更有条理，便于开发和维护。