??在創(chuàng)建了一個(gè)微信小程序項(xiàng)目后，我們可以看到項(xiàng)目里邊就自動(dòng)生成了不同類型的文件：JSON配置文件 .json、WXML目標(biāo)文件 .wxml、WXSS樣式文件 .wxss、JS腳本邏輯文件 .js，下面我們就看看這4種文件的作用。

一、 JSON配置文件： .json

1. 小程序配置 app.json

??在根目錄下，有一個(gè)app.json，是當(dāng)前小程序的全局配置，包括了小程序的所有頁面路徑、頁面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部tab等。
?? 以下是一個(gè)包含了部分常用配置選項(xiàng)的 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：
??用于指定小程序由哪些頁面組成，當(dāng)你想要新建一個(gè)頁面時(shí)，只需在這個(gè)配置中添加好對(duì)應(yīng)頁面的 路徑+文件名，文件名不需要寫文件后綴，框架會(huì)自動(dòng)生成對(duì)應(yīng)位置的 .json、 .js、 .wxml、 .wxss 四個(gè)文件。
??在pages數(shù)組中，第一項(xiàng)代表小程序的初始頁面。小程序中新增/減少頁面，都需要對(duì) pages 數(shù)組進(jìn)行修改。

window：
??用于設(shè)置小程序全局的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。如果想要具體的某個(gè)頁面設(shè)置不同的樣式，每一個(gè)小程序頁面也可以使用.json文件來對(duì)本頁面的窗口表現(xiàn)進(jìn)行配置。頁面的配置只能設(shè)置 app.json 中部分 window 配置項(xiàng)的內(nèi)容，頁面中配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。

tabBar：
??用于配置客戶端窗口底部或頂部tab欄。其中 list 接受一個(gè)數(shù)組，只能配置2-5個(gè) tab。tab 按list數(shù)組的順序排序，每個(gè)項(xiàng)都是一個(gè)對(duì)象。
示例：其中pagePath為鏈接的頁面路徑，必須在 pages 中先定義

networkTimeout：
??各類網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間，單位為毫秒

debug：
?? debug 模式默認(rèn)是關(guān)閉的，當(dāng)啟動(dòng)開發(fā)者模式時(shí)，我們?cè)陂_發(fā)者工具的控制臺(tái)面板，調(diào)試信息以 info 的形式給出，包含Page的注冊(cè)，頁面路由，數(shù)據(jù)更新，事件觸發(fā)等，可以幫助我們快速定位一些開發(fā)中的問題。

navigateToMiniProgramAppIdList：
?? 當(dāng)小程序需要使用 wx.navigateToMiniProgram 接口跳轉(zhuǎn)到其他小程序時(shí)，需要先在配置文件中聲明需要跳轉(zhuǎn)的小程序 appId 列表，最多允許填寫 10 個(gè)。

app.json 配置項(xiàng)列表：

2.工具配置 project.config.json：
?? 俗語說好的，蘿卜白菜各有所愛。我們每個(gè)人在使用一個(gè)開發(fā)工具的時(shí)候，都會(huì)按照個(gè)人的喜好做一些個(gè)性化配置，例如界面顏色、編譯配置等等。但是，一般這個(gè)個(gè)性化的設(shè)置只能在我們自己的電腦上生效，當(dāng)另外一臺(tái)電腦重新安裝工具的時(shí)候，還需要重新配置。小程序開發(fā)者工具在每個(gè)項(xiàng)目的根目錄都會(huì)生成一個(gè) project.config.json，你在工具上做的任何配置都會(huì)寫入到這個(gè)文件，當(dāng)你重新安裝工具或者換電腦工作時(shí)，你只要載入同一個(gè)項(xiàng)目的代碼包，開發(fā)者工具就自動(dòng)會(huì)幫你恢復(fù)到當(dāng)時(shí)你開發(fā)項(xiàng)目時(shí)的個(gè)性化配置，很強(qiáng)?。?！

二、WXML目標(biāo)文件： .wxml

?? WXML與HTML 非常相似，用來描述當(dāng)前這個(gè)頁面的結(jié)構(gòu)， 由標(biāo)簽、屬性等等構(gòu)成，但也只是相似，并非完全一致，區(qū)別：
1. 標(biāo)簽名不一樣：
??HTML 為超文本標(biāo)記語言，我們?cè)趯?shí)現(xiàn)某個(gè)頁面功能時(shí)，用到如 div, p, a等這些基礎(chǔ)標(biāo)簽組合出不一樣的組件。而小程序的 WXML 用的標(biāo)簽是 view, button, text 等等，并且這些標(biāo)簽是包裝好的功能組件，例如提供了地圖、視頻、音頻等等組件。
2. 多了一些屬性以及表達(dá)式：
??在網(wǎng)頁的一般開發(fā)流程中，我們通常會(huì)通過 JS 操作 DOM，然而現(xiàn)在都提倡 MVVM 的開發(fā)模式，將渲染和邏輯分離，小程序也是這樣實(shí)現(xiàn)的，比如通過 {{ }} 語法進(jìn)行數(shù)據(jù)綁定等，詳細(xì)的官方文檔: WXML

三、WXSS樣式文件： .wxss

??WXSS也就是我們經(jīng)常寫的CSS 樣式，不過小程序在 WXSS 做了一些擴(kuò)充和修改：
1.新增了尺寸單位：
??在做小程序開發(fā)時(shí)，我們需要考慮不同的手機(jī)設(shè)備屏幕會(huì)有不同的寬度和設(shè)備像素比，但是小程序可人性化設(shè)計(jì)了，為了避免我們的換算的煩惱WXSS 在底層支持新的尺寸單位 rpx ，小程序底層自動(dòng)換算，像px一樣，rpx一個(gè)尺寸單位而已。
2.提供了全局的樣式和局部樣式：
??與上面的app.json, page.json 的概念相同，我們可以寫一個(gè) app.wxss 作為全局樣式，會(huì)作用于當(dāng)前小程序的所有頁面，局部頁面樣式 page.wxss 僅對(duì)當(dāng)前頁面生效。
3.WXSS 僅支持部分 CSS 選擇器：
詳細(xì)的官方文檔 : WXSS

四、JS腳本邏輯文件：.js

??雖然小程序中不用js操作DOM，但還是要用JS交互邏輯來響應(yīng)用戶的操作。在JS中，不僅可以寫響應(yīng)用戶的事件，還可以調(diào)用小程序提供的豐富的 API，利用這些 API 可以很方便的調(diào)起微信提供的能力，例如獲取用戶信息、本地存儲(chǔ)、微信支付等。
詳細(xì)的官方文檔 WXML - 事件 。