IT廉連看——Uniapp——配置文件pages

[IT廉連看] ?

本堂課主要為大家介紹pages.json這個配置文件

一、打開官網查看pages.json可以配置哪些屬性。

下面邊寫邊講解

新建一個home頁面理解一下這句話。

以下一些頁面的通用配置

通用設置里我們可以對導航欄和狀態欄進行一些設置

接下來我們更改一下導航欄顏色：

"navigationBarBackgroundColor": "#282828", ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alt+鼠標左鍵可選擇顏色

下一步對標題文字進行設置：

"navigationBarTitleText": "IT",

未更改成功，這是為什么？

接下來更改導航欄文字顏色：

導航欄更改顏色，如今官方只支持修改兩種顏色，一種是黑色一種是白色。

二、path和style

path，頁面路由

style：其實我們已經使用過了

在這里我們設置的是通用的窗口樣式。

如果我們想要每個頁面都有不同的樣式，那么就根據它的優先級，把這些代碼再寫入指定的頁面。

三、tabbar

1、打開官網查看tabbar介紹

代碼示例：

"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","list": [{"pagePath": "pages/component/index","iconPath": "static/image/icon_component.png","selectedIconPath": "static/image/icon_component_HL.png","text": "組件"}, {"pagePath": "pages/API/index","iconPath": "static/image/icon_API.png","selectedIconPath": "static/image/icon_API_HL.png","text": "接口"}]
}

每個配置項代表什么：

"color": "#7A7E83",                                                             color：顏色"selectedColor": "#3cc51f",                                                 selectedColor：選中時的顏色"borderStyle": "black",                                                     borderStyle：上邊框顏色"backgroundColor": "#ffffff",                                               backgroundColor：背景顏色

當我們把頁面設置為tabbar頁面，我們需要把頁面添加近list，list可添加2-5個頁面。我們的tabbar需要一些改動。

"list": [{"pagePath": "pages/component/index","iconPath": "static/image/icon_component.png",                      圖片"selectedIconPath": "static/image/icon_component_HL.png",           選中時的圖標"text": "組件"}, {"pagePath": "pages/API/index","iconPath": "static/image/icon_API.png","selectedIconPath": "static/image/icon_API_HL.png","text": "接口"}]

    我們需要更改頁面路徑

2、condition

"condition": { //模式配置，僅開發期間生效"current": 0, //當前激活的模式（list 的索引項）"list": [{"name": "swiper", //模式名稱"path": "pages/component/swiper/swiper", //啟動頁面，必選"query": "interval=4000&autoplay=false" //啟動參數，在頁面的onLoad函數里面得到。},{"name": "test","path": "pages/component/switch/switch"}]
}