微信小程序文件结构示例

微信小程序文件结构示例

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 函数,以便在小程序中复用

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

相关推荐
my小新1 天前
微信小程序引用echarts做统计图
微信小程序·小程序·echarts
鱼是一只鱼啊1 天前
实战 | uni-app (Vue2) HBuilderX 项目改造为 CLI 项目,实现多客户多平台命令行自动化发布
微信小程序·vue·claude·vue-cli·.net8·自动化发布
qq_12498707531 天前
基于springboot的个性化服装搭配推荐小程序(源码+论文+部署+安装)
spring boot·后端·spring·微信小程序·小程序·毕业设计·毕业设计源码
whinc3 天前
🚀 两年小程序开发,我把踩过的坑做成了开源 Skills
前端·微信小程序·ai编程
Lupino3 天前
烧掉 10 刀 API 费,我才明白小程序虚拟列表根本不用“库”!
react.js·微信小程序
小溪彼岸5 天前
是时候给想做小程序的小伙伴泼盆冷水了
微信小程序
远山枫谷5 天前
一文理清页面/组件通信与 Store 全局状态管理
前端·微信小程序
木易士心6 天前
一文读懂:微信小程序云数据库直连原理与使用指南
微信小程序·serverless
明月_清风7 天前
小程序云函数:从入门到全栈的“降维打击”指南
前端·微信小程序·小程序·云开发
拉不动的猪7 天前
移动端调试工具VConsole初始化时的加载阻塞问题
前端·javascript·微信小程序