微信小程序app.json文件常用配置說明
發(fā)布時間：2021-07-09 10:03 所屬欄目：小程序開發(fā)教程
小程序根目錄下的 app.json 文件用來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多 tab 等。
JOSN文件不允許注釋，下面為了學(xué)習(xí)加上注釋，粘貼需要的片段去掉注釋即可。小程序定義color建議使用16進制顏色
1. pages定義頁面路徑列表
"pages": [ "pages/news/news", "pages/index/index", "pages/movie/movie", "pages/logs/logs" ], |
2. window 用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色
"window": {
"backgroundTextStyle": "light", // 下拉 loading 的樣式，僅支持 dark / light
"navigationBarBackgroundColor": "white", // 導(dǎo)航欄背景顏色
"navigationBarTitleText": "哈哈", // 導(dǎo)航欄標(biāo)題內(nèi)容
"navigationBarTextStyle": "black", // 導(dǎo)航欄標(biāo)題顏色 black / white
"navigationStyle": "custom", // 導(dǎo)航欄樣式 默認(rèn)為default custom 表示自定義導(dǎo)航欄，只保留右上角
"backgroundColor":"#ffffff" // 窗口的背景顏色
}, |
3. tabBar
如果小程序是一個多 tab 應(yīng)用（客戶端窗口的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現(xiàn)，以及 tab 切換時顯示的對應(yīng)頁面。
"tabBar": {
"color": "#000", // 文字默認(rèn)顏色
"borderStyle": "black", // tabBar上邊框的顏色 僅支持 black / white
"selectedColor": "#ff6600", // tab 上的文字選中時的顏色
"position":"bottom", // 位置 top | bottom,
"custom": "false", // 自定義tabBar 默認(rèn)false
"list": [ // tab列表
{
"pagePath": "pages/news/news", // 頁面路徑
"text": "新聞", // tab 上按鈕文字
"iconPath": "pages/images/yuedu.png", // 圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片。
當(dāng) position 為 top 時，不顯示 icon。
"selectedIconPath": "pages/images/193.jpg" // 選中時的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片。
當(dāng) position 為 top 時，不顯示 icon。
},
{
"pagePath": "pages/movie/movie",
"text": "電影",
"iconPath": "pages/images/diany.png",
"selectedIconPath": "pages/images/506.jpg"
}
]
}, |
4. networkTimeout
各類網(wǎng)絡(luò)請求的超時時間，單位均為毫秒 默認(rèn)值60000
"networkTimeout": {
"request": 10000, // wx.request 的超時時間
"downloadFile": 10000, // wx.downloadFile 的超時時間
"connectSocket": 10000, // wx.connectSocket 的超時時間
"uploadFile": 10000 // wx.uploadFile 的超時時間
}, |
5. debug
可以在開發(fā)者工具中開啟 debug 模式
"debug": true, |
6. requiredBackgroundModes
申明需要后臺運行的能力，類型為數(shù)組 目前支持audio后臺音樂播放 / location 后臺定位
"requiredBackgroundModes": ["audio", "location"], |
7. permission
小程序接口權(quán)限相關(guān)設(shè)置。字段類型為 Object
"permission": {
"scope.userLocation": { // 位置相關(guān)權(quán)限聲明
"desc": "你的位置信息將用于小程序位置接口的效果展示" // 高速公路行駛持續(xù)后臺定位
}
}, |
8. style
微信小程序基礎(chǔ)組件樣式升級
"style": "v2",
完整app.json文件
{
"pages": [
"pages/news/news",
"pages/index/index",
"pages/movie/movie",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "white",
"navigationBarTitleText": "哈哈",
"navigationBarTextStyle": "black",
"navigationStyle": "custom",
"backgroundColor": "#ffffff"
},
"tabBar": {
"color": "#000",
"borderStyle": "black",
"selectedColor": "#ff6600",
"position": "bottom",
"custom": "false",
"list": [
{
"pagePath": "pages/news/news",
"text": "新聞",
"iconPath": "pages/images/yuedu.png",
"selectedIconPath": "pages/images/193.jpg"
},
{
"pagePath": "pages/movie/movie",
"text": "電影",
"iconPath": "pages/images/diany.png",
"selectedIconPath": "pages/images/506.jpg"
}
]
},
"networkTimeout": {
"request": 6000,
"downloadFile": 60000,
"connectSocket": 60000 ,
"uploadFile": 60000
},
"debug": true,
"requiredBackgroundModes": [
"audio",
"location"
],
"permission": {
"scope.userLocation": {
"desc": "你的位置信息將用于小程序位置接口的效果展示"
}
},
"style": "v2"
} |
