建立的微信小程式包括以下4種類型檔案
【1】.json
字尾的
JSON
配置檔案
- 小程式配置 app.json
pages
字段是用于描述目前小程式所有頁面路徑，這是為了讓微信用戶端知道目前你的小程式頁面定義在哪個目錄。
window
字段是定義小程式所有頁面的頂部背景顔色，文字顔色定義等。
- 工具配置 project.config.json
小程式開發者工具在每個項目的根目錄會生成一個
project.config.json
，在工具上做的任何配置都會寫入到這個檔案，重新安裝工具或者換電腦工作時，你隻要載入同一個項目的代碼包，開發者工具就自動會幫你恢複到當時你開發項目時的個性化配置，其中會包括編輯器的顔色、代碼上傳時自動壓縮等等一系列選項。
- 頁面配置 page.json
page.json
用來表示 pages/logs 目錄下的
logs.json
這類和小程式頁面相關的配置。如果整個小程式是藍色調，那麼你可以在
app.json
裡邊聲明頂部顔色是藍色即可。實際情況可能不是這樣，可能你小程式裡邊的每個頁面都有不一樣的色調來區分不同功能子產品，是以我們提供了
page.json
，讓開發者可以獨立定義每個頁面的一些屬性，例如剛剛說的頂部顔色、是否允許下拉重新整理等等。
JSON文法要求
JSON檔案都是被包裹在一個大括号中 {}，通過key-value的方式來表達資料。JSON的Key必須包裹在一個雙引号中
JSON 檔案中無法使用注釋，試圖添加注釋将會引發報錯。
JSON的值隻能是以下幾種資料格式，其他任何格式都會觸發報錯，
- 數字，包含浮點數和整數
- 字元串，需要包裹在雙引号中
- Bool值，true 或者 false
- 數組，需要包裹在方括号中 []
- 對象，需要包裹在大括号中 {}
- Null
【2】.wxml
字尾的
WXML
模闆檔案
WXML
充當的就是類似
HTML
的角色，如pages/index/index.wxml
- 标簽名字有點不一樣
往往寫 HTML 的時候，經常會用到的标簽是
div
,
p
,
span
，開發者在寫一個頁面的時候可以根據這些基礎的标簽組合出不一樣的元件，例如月曆、彈窗等等。小程式的
WXML
用的标簽是
view
,
button
,
text
等等，是小程式給開發者包裝好的基本能力，此外還提供了地圖、視訊、音頻等等元件能力。多了類似
wx:if
這樣的屬性以及 {{ }} 這樣的表達式
在網頁的一般開發流程中，我們通常會通過
JS
操作
DOM
(對應
HTML
的描述産生的樹)，以引起界面的一些變化響應使用者的行為。例如，使用者點選某個按鈕的時候，
JS
會記錄一些狀态到
JS
變量裡邊，同時通過
DOM
API 操控
DOM
的屬性或者行為，進而引起界面一些變化。當項目越來越大的時候，代碼會充斥着非常多的界面互動邏輯和程式的各種狀态變量，是以就有了 MVVM 的開發模式，把渲染和邏輯分離。簡單來說就是不要再讓
JS
直接操控
DOM
，
JS
隻需要管理狀态即可，然後再通過一種模闆文法來描述狀态和界面結構的關系即可。
通過 {{ }} 的文法把一個變量綁定到界面上，稱為資料綁定。通過資料綁定還不夠完整的描述狀态和界面的關系，還需要
if
/
else
,
for
等控制能力，小程式控制能力都用
wx:
開頭的屬性來表達。
【3】.wxss
字尾的
WXSS
樣式檔案
WXSS
具有
CSS
大部分的特性，小程式在
WXSS
也做了擴充和修改。
- 新增了尺寸機關。在寫
CSS
WXSS
rpx
- 提供了全局的樣式和局部樣式。和前邊
app.json
page.json
app.wxss
page.wxss
-
WXSS
CSS
【4】.js
字尾的
JS
腳本邏輯檔案
通過和使用者做互動，響應使用者的點選、擷取使用者的位置等等。在小程式裡邊，我們就通過編寫JS腳本檔案來處理使用者的操作。可以在JS中調用小程式提供的豐富的 API，利用這些 API 可以很友善的調起微信提供的能力，例如擷取使用者資訊、本地存儲、微信支付等。
（學習自微信小程式開發文檔）