作为微信小程序的开发者,首先必须清晰地了解其目录结构,这里总结了一套还算好维护的目录结构跟大家分享。
基本结构
小程序包含一个描述整体程序的 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 目录同级。