作为微信小程序的开发者,首先必须清晰地了解其目录结构,这里总结了一套还算好维护的目录结构跟大家分享。
基本结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
| 文件 | 必需 | 作用 |
|---|---|---|
| app.js | 是 | 小程序逻辑文件,主要是 javascript 代码 |
| app.json | 是 | 小程序公共配置 |
| app.wxss | 否 | 小程序公共样式表,主要是 css 代码 |
一个小程序页面由四个文件组成,分别是:
| 文件类型 | 必需 | 作用 |
|---|---|---|
| js | 是 | 页面逻辑,javascript 代码 |
| wxml | 是 | 页面结构,类似 html 代码 |
| json | 否 | 页面配置,json 格式数据 |
| wxss | 否 | 页面样式表,css 代码 |
注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。
初始目录结构
当初始化创建小程序后,微信小程序 dev tools 默认会有如下目录结构:
├─ app.js --- 小程序加载时优先加载的入口 js
├─ app.json --- 入口文件和公共配置
├─ app.wxss --- 公共样式表
├─ project.config.json --- 小程序全局配置文件
├─ sitemap.json --- 允许微信索引文件
│
├─ pages --- 小程序页面
│ ├─ index --- 示例页面
│ │ index.js
│ │ index.json
│ │ index.wxml
│ │ index.wxss
│ ├─ logs --- 日志
│ │ log.js
│ │ log.json
│ │ log.wxml
│ │ log.wxss
│ └─ ...
│ ...
│ ...
│
├─ utils --- 功能组件
└─ util.js --- 公共小组件库
组件 components
小程序项目初始化不包含 components 目录,需要手动创建,其和 pages 目录同级。