微信小程序 基础教程

微信小程序 高级教程

微信小程序开发 目录结构详解


作为微信小程序的开发者,首先必须清晰地了解其目录结构,这里总结了一套还算好维护的目录结构跟大家分享。

基本结构

小程序包含一个描述整体程序的 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 目录同级。