微信小程序项目结构介绍

当我们新建好小程序项目第一眼看到目录结构，每一个文件夹或者每一个文件是做什么用的你不知道的话，就静下心来看看我写的这篇文章！

首先看看我下面的截图：

邓高鹃

首先我们看跟目录下的app.js、app.json、app.wxss、project.config.json这四个文件是我们在创建小程序项目的时候自动给我生成的，咱们来看看每一个文件都是做什么的！

1、app.js文件——这是一个小程序的逻辑文件，我们开发小程序的时候把逻辑文件写在这个文件内！

2、app.json——小程序的配置文件！

3、app.wxss——小程序的全局公共样式文件

4、project.config.json——小程序整个项目的配置文件(配置文件较多！我会专门为这个些一篇文章。)

到这里项目结构的一级目录文件都介绍完毕了，我们再来看看一级目录下的文件夹！

1、pages文件夹——一个小程序项目都是由若干个页面文件构成的，每一个页面就要做成一个文件夹。比如我新建小程序项目的文件夹pages下面有2个页面。它们分别是index页面和logs页面，index页面是首页页面也是默认访问的页面、logs是日志页面。再看看每一个页面都是由四个文件类型构成，分别是js、json、wxml、wxss，我们再次对这个四个文件夹做介绍。

1.1、js类型文件——编写当前页面的逻辑代码

1.2、wxml类型文件——编写页面结构的代码

1.3、wxss类型文件——编写页面样式的代码

1.4、json类型文件——编写页面配置文件的代码

如果大家多国前端的话对这些类型文件都不叫好理解，如果大家没有做过前端的话你就这么记住就行后面我会以空杯心态说！

如果大家学习过前端的话这样理解

js类型文件就是类似于JavaScript文件

wxml类型文件就是类似于html文件

wxss类型文件就是类似于css文件

json类型文件就是配置文件。

如果大家没有学习过前端这样理解

wxml类型就好比我们没有装修的毛坯房

wxss类型文件就好比我们装修后的毛坯房

js类型文件就就好比我们多功能的家居(比如说智能的窗帘、家电之类的)

json类型文件就好比(水电、天然气、宽带等根据不同的使用情况进行配置)

大家看看这样一个家是不是就很完美了，我们在开发微信小程序页面的时候也是这样的，wxml类型文件帮这么做的是页面的结构、wxss类型文件帮我做的是样式、js文件帮我做的是行为动作、json类型文件帮我们做的是根据自己的需要做些其他的配置。这样大家是不是理解了啊！

在项目结构中！除了pages文件夹外还由一个utils文件夹，这个文件夹用来存放一些公共的js文件，一般开发中不需要修改utils.js文件。