目录结构

微信小程序的目录结构可以分为三个部分：框架全局文件，框架页面文件和工具类文件，结构如下

|--pages···················[目录] 存放所有的小程序页面
 |--index··················[目录] index页面
   |--index.js·············[文件] index页面的逻辑
   |--index.json···········[文件] index页面的配置
   |--index.wxml···········[文件] index页面的结构
   |--index.wxss···········[文件] index页面的样式
 |--logs···················[目录] logs页面
   |--logs.js··············[文件] logs页面的逻辑
   |--logs.json············[文件] logs页面的配置
   |--logs.wxml············[文件] logs页面的结构
   |--logs.wxss············[文件] logs页面的样式
|--utils···················[目录] 存放小程序中用到的工具函数
|--app.js··················[文件] 小程序的全局逻辑
|--app.json················[文件] 小程序的全局公共配置
|--app.wxss················[文件] 小程序的全局公共样式
|--project.config.json·····[文件]    开发工具文件
|--sitemap.json············[文件] 索引配置

框架全局文件

一个小程序的主体部分由3个文件组成，作为全局文件，必须放在项目的根目录中，框架全局文件包括3个文件；app.js小程序逻辑(定义全

局数据以及定义函数文件)，app.json小程序公共设置，app.wxss小程序公共样式表。它们对所有页面都有效。

1.app.js小程序逻辑

整个微信小程序相关的全局js，这里有监听整个小程序的生命周期函数和全局变量；

2.app.json小程序公共设置

是对整个小程序的静态全局配置，我们可以在这个文件中配置小程序是由哪些页面组成（路由），配置小程序的窗口背景色、配置导航条样式，配置默认标题，可以配置整个项目的样式，超时时间，加载的插件等等；(注意该文件不可添加任何注释)；

3.app.wxss文件小程序公共样式表

整个小程序的样式文件，我个人认为这个文件就是设置整个项目的css文件。针对每个页面的css文件的内容不同，加载到对应页面的css样式时，当前页面的wxss文件会覆盖app.wxss文件（跟普通的css样式的覆盖规则类似）。

4.project.config.json 开发工具文件

这个其实是每个开发者工具生成的项目都有的，但和项目内容实际没有特别大关联，主要是记录相关工具的配置的，在工具上做的任何配置都会写入到这个文件，当重新安装工具或者换电脑工作时，只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

5.sitemap.json 索引文件

这个可以配置是否允许被微信索引，具体看微信官方文档-sitemap 配置

工具类文件

utils目录

这里面存的都是一些公用的js，就当作web后端项目的工具类就好啦，提供公共方法减少冗余和维护难度的；

框架页面文件

这个目录下放的其实就是一个个的微信端的页面了其中的index文件夹、logs文件夹其实都是单独的页面；小程序一个页面由四个文件组成，分别是：

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

允许上传的文件

在项目目录中，以下文件会经过编译，因此上传之后无法直接访问到：.js、app.json、.wxml、*.wxss（其中 wxml 和 wxss 文件仅针对在 app.json 中配置了的页面）。除此之外，只有后缀名在白名单内的文件可以被上传，不在白名单列表内文件在开发工具能被访问到，但无法被上传。具体白名单列表如下：

wxs
png
jpg
jpeg
gif
svg
json
cer
mp3
aac
m4a
mp4
wav
ogg
silk
wasm
br