简单了解微信小程序的目录结构

前言

在开发小程序之前，我们首先需要对其目录结构进行了解，以便于提升开发效率。

我们使用微信开发者工具构建一个小程序项目，我们可以看到目录下生成了件。

在上图的示例中，我们可以看到根目录下有JS、JSON、WXSS类型文件，这是作为全局配置；而pages/index目录下的四类文件是对具体的页面进行详细设置。

由此可以看出这四类文件在小程序中负责不同的功能，它们在不同的目录下扮演不同的角色。接下来，我们将详细说明四类文件的作用。

1JSON配置

在小程序中，JSON是一种数据格式，其并不是编程语言，它用于配置静态的属性。我们可以看到在根目录下有app.json、project.config.json、以及sitemap.json，在pages/index下有index.json。前三种是对整个小程序的全局配置，而后一种是对具体页面的配置。接下来，我们对其做详细说明。

①、app.json配置文件

其作为当前小程序的全局配置，包括配置页面路径列表、全局默认窗口表现、网络超时时间、底部tab栏、小程序接口权限相关设置等。

注：在json文件中是不能加注释的，此处只为了解释，因此在使用过程中切勿加注释，其他相关属性查看官方文档。

{ /**  * 页面路径列表  * 用于指定小程序由那些页面组成，每一项都对应一个页面的路径。  * 数组列表中的第一项代表小程序的首页。 */  "pages": [  "pages/index/index" ], /**  * 全局默认窗口表现  * 用于设置小程序的状态栏、导航条、标题、窗口背景颜色 */  "window": {  "navigationBarBackgroundColor": "#fff",//导航栏背景颜色  "navigationBarTitleText": "MiniProgrameDemo",//导航栏标题文字内容  "navigationBarTextStyle": "black"//导航栏标题颜色，仅支持black/white }, //底部tab栏 "tabBar": {  "list": [//tab的列表，最少2个，最多5个   {    "pagePath": "pages/index/index",//页面路径    "text": "首页"//tab上按钮文字   },   {    "pagePath": "pages/index/index",    "text": "第二个首页"   }  ] }, //配置小程序及其页面是否允许被微信索引，若没有该配置，则默认所有页面都允许被索引 "sitemapLocation": "sitemap.json"}

②、project.config.json工具配置