微信小程序起步-小程序代码构成

1. 小程序代码构成

在上一章中，我们通过开发者工具快速创建了一个QuickStart项目。你可以留意到这个项目里面生成了不同类型的文件。

1. .json后缀的JSON配置文件
2. .wxml后缀的WXML模板文件
3. .wxss后缀的WXSS样式文件
4. .js后缀的JS脚本逻辑文件
   接下来我们分别看看这4种文件的作用。
   各种配置文件：
   

2. JSON配置

JSON是一种数据格式，并不是编译语言，在小程序中，JSON扮演的静态配置的角色。
我们可以看到在项目的根目录有一个app.json和project.config.json，此外在pages/logs目录下还有一个logs.json，我们依次来说明以下它们的用途。

3. 小程序配置app.json

app.json是当前小程序的全局配置，包括了小程序的所有页面路径，界面表现，网络超时时间，底部tab等。QuickStrat项目里边的app.json配置内容如下：

{
   
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
   
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  },
  "style": "v2",
  "rendererOptions": {
   
    "skyline": {
   
      "defaultDisplayBlock": true,
      "disableABTest": true,
      "sdkVersionBegin": "3.0.0",
      "sdkVersionEnd": "15.255.255"
    }
  },
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

我们简单说一下这个配置各个项的含义：

1. pages字段——用于描述当前小程序所有页面的路径。这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2. window字段——定义小程序所有页面的顶部背景颜色，文字颜色定义等。
   其他配置项细节可以参考文档小程序的配置app.json👈点击查看小程序的配置app.json

4. 工具配置project.config.json

通常大家在使用一个工具的时候，打偶会针对各自喜好做一些个性化配置，例如界面颜色，编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。
考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色，代码上传时自动压缩等等一系列选项。
其他配置项细节可以参考文档开发者工具的配置 👈点击查看开发者工具的配置

{