小程式專案的全域性配置
全域性配置
window
用於設定小程式的狀態列、導航條、標題、視窗背景色。
navigationBarBackgroundColor HexColor #000000 導航欄背景顏色,如 #000000
navigationBarTextStyle String white 導航欄標題顏色,僅支援 black / white
navigationBarTitleText String 導航欄標題文字內容
wepy框架裡面不能直接在app裡面設定,需要在使用的頁面裡面設定,否則不會顯示
- navigationStyle String default 導航欄樣式,僅支援以下值:
- default 預設樣式
- custom 自定義導航欄,只保留右上角膠囊按鈕。
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.onPullDownRefreshonReachBottomDistance Number 50 頁面上拉觸底事件觸發時距頁面底部距離,單位為px。
詳見 Page.onReachBottompageOrientation String portrait 螢幕旋轉設定,僅支援 auto / portrait
詳見 響應顯示區域變化 微信客戶端 6.7.3
用例:
window: {
// 導航欄背景顏色
"navigationBarBackgroundColor": "#FF6666",
// 導航欄標題顏色,僅支援 black / white
"navigationBarTextStyle": "white",
// 航欄樣式,僅支援以下值: default, custom 自定義導航欄,只保留右上角膠囊按鈕
"navigationStyle": "default",
// 視窗的背景色
"backgroundColor": "#e5e5e5",
// 下拉 loading 的樣式,僅支援 dark / light
"backgroundTextStyle": "dark",
// 螢幕旋轉設定,僅支援 auto / portrait
"pageOrientation": "portrait",
}
Tabbar
如果小程式是一個多tab
應用(客戶端視窗的底部或頂部有 tab 欄可以切換頁面),可以通過tabBar
配置項指定tab
欄的表現,以及tab
切換時顯示的對應頁面。
- color tab上的文字預設顏色,僅支援十六進位制顏色
- selectedColor tab上的文字選中時的顏色,僅支援十六進位制顏色
- backgroundColor tab的背景色,僅支援十六進位制顏色
- borderStyle tabbar上邊框的顏色, 僅支援 black / white
- list tab的列表,詳見 list 屬性說明,最少2個、最多5個 tab
- position tabBar的位置,僅支援 bottom / top
list 接受一個數組,只能配置最少2個、最多5個 tab。tab 按陣列的順序排序,每個項都是一個物件,其屬性值如下:
- pagePath 頁面路徑,必須在 pages 中先定義
- text tab上按鈕文字
- iconPath 圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px,不支援網路圖片。當 postion 為 top 時,不顯示 icon。
- selectedIconPath 選中時的圖片路徑,icon 大小限制為40kb,建議尺寸為 81px * 81px,不支援網路圖片。當 postion 為 top 時,不顯示 icon。
用例:
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'
}
]
}