用于設置小程序的狀態(tài)欄、導航條、標題、窗口背景色。
navigationBarBackgroundColor HexColor #000000 導航欄背景顏色,如 #000000
navigationBarTextStyle String white 導航欄標題顏色,僅支持 black / white
navigationBarTitleText String 導航欄標題文字內(nèi)容
wepy框架里面不能直接在app里面設置,需要在使用的頁面里面設置,否則不會顯示
backgroundColor HexColor #ffffff 窗口的背景色
當我們在微信小程序json中設置backgroundColor 時,實際在電腦的模擬器中根本看不到效果。
這是因為 backgroundColor 指的窗體背景顏色,而不是頁面的背景顏色,即窗體下拉刷新或上拉加載時露出的背景。在電腦的模擬器中是看不到這個動作的,所以會讓人誤以為這個配置是無效的。
backgroundTextStyle String dark 下拉 loading 的樣式,僅支持 dark / light
backgroundColorTop String #ffffff 頂部窗口的背景色,僅 iOS 支持 微信客戶端 6.5.16
backgroundColorBottom String #ffffff 底部窗口的背景色,僅 iOS 支持 微信客戶端 6.5.16
enablePullDownRefresh Boolean false 是否開啟當前頁面的下拉刷新。
詳見 Page.onPullDownRefresh
onReachBottomDistance Number 50 頁面上拉觸底事件觸發(fā)時距頁面底部距離,單位為px。
詳見 Page.onReachBottom
pageOrientation String portrait 屏幕旋轉(zhuǎn)設置,僅支持 auto / portrait
詳見 響應顯示區(qū)域變化 微信客戶端 6.7.3
用例:
window: {
// 導航欄背景顏色
"navigationBarBackgroundColor": "#FF6666",
// 導航欄標題顏色,僅支持 black / white
"navigationBarTextStyle": "white",
// 航欄樣式,僅支持以下值: default, custom 自定義導航欄,只保留右上角膠囊按鈕
"navigationStyle": "default",
// 窗口的背景色
"backgroundColor": "#e5e5e5",
// 下拉 loading 的樣式,僅支持 dark / light
"backgroundTextStyle": "dark",
// 屏幕旋轉(zhuǎn)設置,僅支持 auto / portrait
"pageOrientation": "portrait",
}
如果小程序是一個多tab應用(客戶端窗口的底部或頂部有 tab 欄可以切換頁面),可以通過tabBar配置項指定tab欄的表現(xiàn),以及tab切換時顯示的對應頁面。
list 接受一個數(shù)組,只能配置最少2個、最多5個 tab。tab 按數(shù)組的順序排序,每個項都是一個對象,其屬性值如下:
用例:
tabBar: {
color: '#666666',
selectedColor: '#ff6600',
position: 'bottom',
backgroundColor: '#fff',
borderStyle: 'black',
list: [
{
pagePath: 'pages/home/index',
text: '首頁',
iconPath: 'assets/img/icon-1.png',
selectedIconPath: 'assets/img/icon-1-selected.png'
},
{
pagePath: 'pages/search/index',
text: '搜索',
iconPath: 'assets/img/icon-2.png',
selectedIconPath: 'assets/img/icon-2-selected.png'
},
{
pagePath: 'pages/sell/index',
text: '排行榜',
iconPath: 'assets/img/icon-3.png',
selectedIconPath: 'assets/img/icon-3-selected.png'
},
{
pagePath: 'pages/spike/index',
text: '搶購',
iconPath: 'assets/img/icon-2.png',
selectedIconPath: 'assets/img/icon-2-selected.png'
},
{
pagePath: 'pages/profile/index',
text: '我的',
iconPath: 'assets/img/icon-5.png',
selectedIconPath: 'assets/img/icon-5-selected.png'
}
]
}