app.json 全局配置
app.json
用于對(duì)小程序進(jìn)行全局配置,設(shè)置頁(yè)面文件的路徑、窗口表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、多 tab 等。
以下是一個(gè)基本配置示例:
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"defaultTitle": "Demo"
}
}
完整配置項(xiàng)如下:
屬性 | 類型 | 是否必填 | 描述 |
---|---|---|---|
pages | Array | 是 | 設(shè)置頁(yè)面路徑 |
window | Object | 否 | 設(shè)置默認(rèn)頁(yè)面的窗口表現(xiàn) |
tabBar | Object | 否 | 設(shè)置底部 tabbar 的表現(xiàn) |
pages
app.json
中的 pages
為數(shù)組屬性,數(shù)組中每一項(xiàng)都是字符串,用于指定小程序的頁(yè)面。在小程序中新增或刪除頁(yè)面,都需要對(duì) pages
數(shù)組進(jìn)行修改。
pages
數(shù)組的每一項(xiàng)代表對(duì)應(yīng)頁(yè)面的路徑信息,其中,第一項(xiàng)代表小程序的首頁(yè)。
頁(yè)面路徑不需要寫任何后綴,框架會(huì)自動(dòng)去加載同名的 .json
、.js
、.axml
、.acss
文件。舉例來說,如果開發(fā)目錄為:
├── pages
│ ├──index
│ │ ├── index.json
│ │ ├── index.js
│ │ ├── index.axml
│ │ └── index.acss
│ ├──logs
│ │ ├── logs.json
│ │ ├── logs.js
│ │ └── logs.axml
├── app.json
├── app.js
└── app.acss
那么 app.json
就要寫成:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
window
window 用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色等。
屬性 | 類型 | 是否必填 | 描述 |
---|---|---|---|
defaultTitle | String | 否 | 頁(yè)面默認(rèn)標(biāo)題 |
pullRefresh | String | 否 | 是否允許下拉刷新。默認(rèn) NO。 備注:下拉刷新生效的前提是 allowsBounceVertical 值為 YES |
allowsBounceVertical | String | 否 | 是否允許向下拉拽。默認(rèn) YES , 支持 YES / NO |
transparentTitle | String | 否 | 導(dǎo)航欄透明設(shè)置。默認(rèn) none ,支持 always 一直透明 / auto 滑動(dòng)自適應(yīng) / none 不透明 |
titlePenetrate | String | 否 | 是否允許導(dǎo)航欄點(diǎn)擊穿透。默認(rèn) NO ,支持 YES / NO |
showTitleLoading | String | 否 | 是否進(jìn)入時(shí)顯示導(dǎo)航欄的 loading。默認(rèn) NO ,支持 YES / NO |
titleImage | String | 否 | 導(dǎo)航欄圖片地址 |
titleBarColor | HexColor | 否 | 導(dǎo)航欄背景色 |
backgroundColor | HexColor | 否 | 下拉露出顯示的背景顏色 |
backgroundImageColor | HexColor | 否 | 下拉露出顯示的背景圖底色 |
backgroundImageUrl | String | 否 | 下拉露出顯示的背景圖鏈接 |
gestureBack | String | 否 | iOS 用,是否支持手勢(shì)返回。默認(rèn) NO ,支持 YES / NO |
enableScrollBar | Boolean | 否 | Android 用,是否顯示 WebView 滾動(dòng)條。默認(rèn) YES ,支持 YES / NO |
代碼示例:
{
"window":{
"defaultTitle": "客戶端接口功能演示"
}
}
tabBar
如果您的小程序是一個(gè)多 tab 應(yīng)用(客戶端窗口的底部欄可以切換頁(yè)面),那么可以通過 tabBar
配置項(xiàng)指定 tab 欄的表現(xiàn),以及 tab 切換時(shí)顯示的對(duì)應(yīng)頁(yè)面。
- 通過頁(yè)面跳轉(zhuǎn)(
my.navigateTo
)或者頁(yè)面重定向(my.redirectTo
)所到達(dá)的頁(yè)面,即使它是定義在 tabBar 配置中的頁(yè)面,也不會(huì)顯示底部的 tab 欄。 tabBar
的第一個(gè)頁(yè)面必須是首頁(yè)。
tabBar 配置項(xiàng)如下:
屬性 | 類型 | 是否必填 | 描述 |
---|---|---|---|
textColor | HexColor | 否 | 文字顏色 |
selectedColor | HexColor | 否 | 選中文字顏色 |
backgroundColor | HexColor | 否 | 背景色 |
items | Array | 是 | 每個(gè) tab 配置 |
每個(gè) item 配置如下:
屬性 | 類型 | 是否必填 | 描述 |
---|---|---|---|
pagePath | String | 是 | 設(shè)置頁(yè)面路徑 |
name | String | 是 | 名稱 |
icon | String | 否 | 平常圖標(biāo)路徑 |
activeIcon | String | 否 | 高亮圖標(biāo)路徑 |
icon 圖標(biāo)推薦大小為 60×60 px,系統(tǒng)會(huì)對(duì)傳入的非推薦尺寸的圖片進(jìn)行非等比拉伸或縮放。
tabBar 示例如下:
{
"tabBar": {
"textColor": "#dddddd",
"selectedColor": "#49a9ee",
"backgroundColor": "#ffffff",
"items": [
{
"pagePath": "pages/index/index",
"name": "首頁(yè)"
},
{
"pagePath": "pages/logs/logs",
"name": "日志"
}
]
}
}