微信小程序目錄結構與配置介紹

一、小程序結構目錄

小程序框架提供了自己的視圖層描述語言 WXML 和 WXSS，以及 JavaScript，並在視圖層與邏輯層間提供了數據傳輸和事件系統，讓開發者能夠專注於數據與邏輯。

官網

1.1. 小程序文件結構和傳統web對比

結構	傳統web	微信小程序
結構	HTML	WXML
樣式	CSS	WXSS
邏輯	Javascript	Javascript
配置	無	JSON

通過以上對比得出，傳統web 是三層結構。而微信小程序 是四層結構，多了一層 配置.json

1.2. 基本的項目目錄

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

二、配置介紹

1. 配置介紹

一個小程序應用程序會包括最基本的兩種配置文件。一種是全局的 app.json 和 頁面自己的 page.json

注意：配置文件中不能出現注釋

1.1. 全局配置app.json

app.json 是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、網絡超時時間、底部 tab 等。普通快速啟動項目里邊的 app.json 配置

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

字段的含義

1. pages字段 —— 用於描述當前小程序所有頁面路徑，這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。

2. window字段 —— 定義小程序所有頁面的頂部背景顏色，文字顏色定義等。

3. 完整的配置信息請參考 app.json配置

1.2. page.json

這里的 page.json 其實用來表示頁面目錄下的 page.json 這類和小程序頁面相關的配置。

每一個小程序頁面也可以使用同名 .json 文件來對本頁面的窗口表現進行配置

開發者可以獨立定義每個頁面的一些屬性，如頂部顏色、是否允許下拉刷新等等。

頁面的配置只能設置 app.json 中部分 window 配置項的內容，頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。

例如：

{
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "微信接口功能演示",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

屬性	類型	默認值	描述
navigationBarBackgroundColor	HexColor	#000000	導航欄背景顏色，如 #000000
navigationBarTextStyle	String	white	導航欄標題顏色，僅支持 black / white
navigationBarTitleText	String		導航欄標題文字內容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的樣式，僅支持 dark / light
enablePullDownRefresh	Boolean	false	是否全局開啟下拉刷新。 詳見 Page.onPullDownRefresh
onReachBottomDistance	Number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位為px。 詳見 Page.onReachBottom
disableScroll	Boolean	false	設置為 true 則頁面整體不能上下滾動；只在頁面配置中有效，無法在 app.json 中設置該項