微信小程序文件结构示例

微信小程序文件结构示例

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

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

相关推荐
千寻技术帮8 小时前
50022_基于微信小程序同城维修系统
java·mysql·微信小程序·小程序·同城维修
云起SAAS1 天前
名字姓名起名打分评分抖音快手微信小程序看广告流量主开源
微信小程序·小程序·ai编程·看广告变现轻·名字姓名起名打分评分
李纲明2 天前
Wordpress如何选择适合外贸的模板主题?
微信小程序·php
一人一程温一壶酒2 天前
微信小程序uniapp开发附源码——图片加水印
微信小程序·uni-app·notepad++
vx_bscxy3223 天前
告别毕设焦虑!Python 爬虫 + Java 系统 + 数据大屏,含详细开发文档 基于微信小程序的民宿预约系统22398 (上万套实战教程,赠送源码)
java·spring boot·mysql·微信小程序·课程设计
千寻技术帮3 天前
50015_基于微信小程序的红色旅游系统
微信小程序·小程序·源码·ppt·项目文档
sg_knight3 天前
微信小程序中 WebView 组件的使用与应用场景
前端·javascript·微信·微信小程序·小程序·web·weapp
我很苦涩的3 天前
使用微信小程序实现多格验证码效果
微信小程序·小程序
阿里花盘3 天前
花店微信小程序怎么做,创建一个小程序需要多少钱
微信小程序·小程序
2501_933509074 天前
无锡制造企税惠防错指南:知了问账帮守政策红利线
大数据·人工智能·微信小程序