打开开发者工具快速生成项目,先来看看小程序最基础文档结构,如图

小程序网络架构图 小程序结构图_小程序网络架构图

从上到下了解一下各个文件或文件夹具体的作用:
1. pages文件夹:
从字面上看可能是页面的集合,事实确实如此,一个完整小程序pages下会存许多子文件夹,而每个子文件夹就是一个小程序的页面,在图片中的page下有两个文件夹index和logs就说明快速生成的项目默认是有两个页面的,所以pages文件夹就是用来存放各种页面的文件夹的;
2、index和logs文件夹:
页面文件夹,文件夹下面存放的是页面的代码其中包括JS文件、wxml文件、wxss文件以及json配置文件,需要注意的是:
  1. 文件夹的名称可以和文件夹下的文件名称不一致,只是为了方便,我们习惯把页面的所有名称和文件夹的名称保持一致;
  2. 小程序的页面是由JS、wxml、wxss和json共同构成的,所以文件夹下的页面文件一般是4个文件成套的,当然你可以缺少某个文件,但是不能缺少JS文件不然后台会报错;
  3. 并不是一个文件夹下只可以存放一个页面文件,一个文件夹下可以存反多个页面的文件,但是我们一般不会这么做,一位这样不便于我们对页面进行管理;
  4. 虽然不是硬性规定每个页面一定要放在一个子文件夹内,你可以存放在pages目录下或者是其他地方,但是为了美观和便于管理最好每个页面四个文件放在一个文件夹内;
  5. logs页面比较特殊,小程序的日志页面,可以访问;
3、JS、wxml、wxss和json文件:
JS文件就是控制页面的js代码,wxml类似于HTML,只是HTML中的标签在wxml中称之为组件,并且组件名称和标签名称不一样,使用的方式也不一样,所以说是类似;但是wxss和css几乎是一样的,所以可已说wxss文件就是网页中的css文件,json文件是对页面窗口之类的一些配置,一般这些配置都使用app.json中的配置;
4、utils文件夹:
utils文件夹下存放的是一些公用的方法,就是公用的JS文件比如日期格式化 判断手机号码是否正确 判断某个权限是否授权等等,在需要的地方调用;
5、app.js文件:
app.js是小程序的入口文件,文件中就调用了APP()函数
6、app.json文件:
全局配置文件,对页面路径列表、窗口表现、 tab栏表现之类的进行配置
7、app.wxss文件:
全局的样式文件,在页面中的wxss不用引入可以直接访问到app.wxss的样式;
8、project.config.json文件:
小程序开发者工具在每个项目的根目录都会生成一个 project.config.json,在工具上做的任何配置都会写入到这个文件,当重新安装工具或者换电脑工作时,只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
9、sitemap.json 文件:
小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引,文件内容为一个 JSON 对象,如果没有 sitemap.json ,则默认为所有页面都允许被索引;