微信小程序开发目录结构介绍

在进行微信小程序开发的时候，有一个固定的默认的目录结构，该结构中包含一个app（主体部分）和多个page（页面），其中分别有四种文件类型，详细介绍如下：

1、目录结构

test

 ├─ page

 │ └─ index

 │  ├─ index.js

 │  ├─ index.json

 │  ├─ index.wxml

 │  └─ index.wxss

 ├─ app.js

 ├─ app.json

 └─ app.wxss

2、目录结构详细介绍

 （1）项目文件介绍

.js后缀的文件是脚本文件，实现页面的交互等代码；

.json后缀的文件是配置文件，主要用于json数据格式存放与设置程序的配置效果；

.wxss后缀的是样式表文件，类似前端css，用于界面美化；

.wxml后缀的文件是页面结构文件，用于构建页面与页面上控件的增加。

 （2）app主体部分介绍

app是用来描述整体程序的，由.js、.json、.wxss文件组成。.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，它们都必须放在项目根目录中。

app.js是小程序的必要的脚本代码，在这个文件中可以监听并处理小程序的生命周期函数、声明全局变量，并调用框架为开发提供的丰富的 API。

app.json是对整个小程序运行中必须的全局配置，用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。它所接受每一个数组中每一项都是字符串，来指定小程序由哪些页面组成。微信小程序中的每一个页面的“路径+页面名”都必须写在app.json的pages中，并且pages中的第一个页面是小程序的首页。

app.wxss是整个小程序的公共样式表，不同于app.js与app.json的必须性，它是非必须的存在。

（3）page页面介绍

page是用来描述页面，一个页面由.js、.json、.wxss、.wxml四个文件组成，即每一个小程序页面都是由同路径下同名的四个不同后缀文件的组成。比如首页的index，它的纹面组成就是index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。

index.js 是必须的页面脚本文件，在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例，声明并处理数据，响应页面交互事件等。

index.wxss是非必须的页面样式表文件，当有页面样式表时，页面的样式表中的样式规则会层叠覆盖app.wxss中的样式规则。如果不指定页面的样式表，也可以在页面的结构文件中直接使用app.wxss中指定的样式规则。

index.json是非必须页面配置文件，当有页面有指定的页面配置文件时，配置项在该页面会覆盖app.json的window中相同的配置项。如果没有指定的页面配置文件，则在该页面直接使用app.json中的默认配置。

  文末，小编顺便说下两个需要注意的点，一是为了为了方便开发者减少配置项，小程序规定描述页面的四个文件必须具有相同的路径与文件名；二是小程序提供了丰富的API，开发者可根据需求选择，具体网址为https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=201715。