在创建了一个微信小程序项目后，我们可以看到项目里边就自动生成了不同类型的文件：JSON配置文件 .json、WXML目标文件 .wxml、WXSS样式文件 .wxss、JS脚本逻辑文件 .js，下面我们就看看这4种文件的作用。

一、 JSON配置文件： .json

1. 小程序配置 app.json

  在根目录下，有一个app.json，是当前小程序的全局配置，包括了小程序的所有页面路径、页面表现、网络超时时间、底部tab等。
   以下是一个包含了部分常用配置选项的 app.json ：

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo",
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,
  "navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}

pages：
  用于指定小程序由哪些页面组成，当你想要新建一个页面时，只需在这个配置中添加好对应页面的 路径+文件名，文件名不需要写文件后缀，框架会自动生成对应位置的 .json、 .js、 .wxml、 .wxss 四个文件。
  在pages数组中，第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

window：
  用于设置小程序全局的状态栏、导航条、标题、窗口背景色。如果想要具体的某个页面设置不同的样式，每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

tabBar：
  用于配置客户端窗口底部或顶部tab栏。其中 list 接受一个数组，只能配置2-5个 tab。tab 按list数组的顺序排序，每个项都是一个对象。
示例：其中pagePath为链接的页面路径，必须在 pages 中先定义

networkTimeout：
  各类网络请求的超时时间，单位为毫秒

debug：
   debug 模式默认是关闭的，当启动开发者模式时，我们在开发者工具的控制台面板，调试信息以 info 的形式给出，包含Page的注册，页面路由，数据更新，事件触发等，可以帮助我们快速定位一些开发中的问题。

navigateToMiniProgramAppIdList：
   当小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时，需要先在配置文件中声明需要跳转的小程序 appId 列表，最多允许填写 10 个。

app.json 配置项列表：

2.工具配置 project.config.json：
   俗语说好的，萝卜白菜各有所爱。我们每个人在使用一个开发工具的时候，都会按照个人的喜好做一些个性化配置，例如界面颜色、编译配置等等。但是，一般这个个性化的设置只能在我们自己的电脑上生效，当另外一台电脑重新安装工具的时候，还需要重新配置。小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，很强！！！

二、WXML目标文件： .wxml

   WXML与HTML 非常相似，用来描述当前这个页面的结构， 由标签、属性等等构成，但也只是相似，并非完全一致，区别：
1. 标签名不一样：
  HTML 为超文本标记语言，我们在实现某个页面功能时，用到如 div, p, a等这些基础标签组合出不一样的组件。而小程序的 WXML 用的标签是 view, button, text 等等，并且这些标签是包装好的功能组件，例如提供了地图、视频、音频等等组件。
2. 多了一些属性以及表达式：
  在网页的一般开发流程中，我们通常会通过 JS 操作 DOM，然而现在都提倡 MVVM 的开发模式，将渲染和逻辑分离，小程序也是这样实现的，比如通过 {{ }} 语法进行数据绑定等，详细的官方文档: WXML

三、WXSS样式文件： .wxss

  WXSS也就是我们经常写的CSS 样式，不过小程序在 WXSS 做了一些扩充和修改：
1.新增了尺寸单位：
  在做小程序开发时，我们需要考虑不同的手机设备屏幕会有不同的宽度和设备像素比，但是小程序可人性化设计了，为了避免我们的换算的烦恼WXSS 在底层支持新的尺寸单位 rpx ，小程序底层自动换算，像px一样，rpx一个尺寸单位而已。
2.提供了全局的样式和局部样式：
  与上面的app.json, page.json 的概念相同，我们可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3.WXSS 仅支持部分 CSS 选择器：
详细的官方文档 : WXSS

四、JS脚本逻辑文件：.js

  虽然小程序中不用js操作DOM，但还是要用JS交互逻辑来响应用户的操作。在JS中，不仅可以写响应用户的事件，还可以调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。
详细的官方文档 WXML - 事件 。