全局配置

全局配置文件及常用配置項(xiàng)

全局配置—window

小程序窗口組成部分

了解window節(jié)點(diǎn)常用的配置項(xiàng)

設(shè)置導(dǎo)航欄的標(biāo)題

設(shè)置步驟：app.json => window => navigationBarTitteText

需求:把導(dǎo)航條上的標(biāo)題，從默認(rèn)的“WeChat”修改為"黑馬程序員",效果如圖所示:

設(shè)置導(dǎo)航欄的背景色

設(shè)置步驟：app.json => window => navigationBarBackgroundColor

需求：把導(dǎo)航欄標(biāo)題的背景色，從默認(rèn)的 #fff 修改為 #2b4b6b ，效果如圖所示：

設(shè)置導(dǎo)航欄的標(biāo)題顏色

設(shè)置步驟：app.json -> window -> navigationBarTextStyle

需求：把導(dǎo)航欄上的標(biāo)題顏色，從默認(rèn)的 black 修改為 white ，效果如圖所示：

注意: navigationBarTextStyle 的可選值只有 black 和 white

全局開啟下拉刷新功能

概念：下拉刷新是移動(dòng)端的專有名詞，指的是通過手指在屏幕上的下拉滑動(dòng)操作，從而重新加載頁面數(shù)據(jù)的行為。

設(shè)置步驟：app.json -> window -> 把 enablePullDownRefresh 的值設(shè)置為 true

注意：在 app.json 中啟用下拉刷新功能，會(huì)作用于每個(gè)小程序頁面！

設(shè)置下拉刷新時(shí)窗口的背景色

當(dāng)全局開啟下拉刷新功能之后，默認(rèn)的窗口背景為白色。如果自定義下拉刷新窗口背景色，設(shè)置步驟為: app.json -> window -> 為 backgroundColor 指定16進(jìn)制的顏色值 #efefef。效果如下：

設(shè)置下拉刷新時(shí)loading的樣式

當(dāng)全局開啟下拉刷新功能之后，默認(rèn)窗口的 loading 樣式為白色，如果要更改 loading 樣式的效果，設(shè)置步驟為 app.json -> window -> 為 backgroundTextStyle 指定dark值。效果如下：

注意: backgroundTextStyle 的可選值只有 light 和 dark 

設(shè)置上拉觸底的距離

概念：上拉觸底是移動(dòng)端的專有名詞，通過手指在屏幕上的上拉滑動(dòng)操作，從而加載更多數(shù)據(jù)的行為。

設(shè)置步驟： app.json -> window -> 為 onReachBottomDistance 設(shè)置新的數(shù)值

注意：默認(rèn)距離為0，如果沒有特殊需求，建議使用默認(rèn)值即可。

全局配置—tabbar

什么是tabbar

tabBar 是移動(dòng)端應(yīng)用常見的頁面效果，用于實(shí)現(xiàn)多頁面的快速切換。小程序中通常將其分為：

1. 底部 tabBar
2. 頂部 tabBar

注意：

tabBar中只能配置 最少 2 個(gè) 、 最多 5 個(gè) tab 頁簽當(dāng)渲染 頂部 tabBar 時(shí)， 不顯示 icon ，只顯示文本

tabbar的6個(gè)組成部分

tabbar節(jié)點(diǎn)的配置項(xiàng)

每個(gè)tab項(xiàng)的配置選項(xiàng)

頁面配置

頁面配置文件的作用

小程序中，每個(gè)頁面都有自己的 .json 配置文件，用來對(duì)當(dāng)前頁面的窗口外觀、頁面效果等進(jìn)行配置。

頁面配置和全局配置的關(guān)系

小程序中，app.json 中的 window 節(jié)點(diǎn)，可以全局配置小程序中每個(gè)頁面的窗口表現(xiàn)。

如果某些小程序頁面想要擁有特殊的窗口表現(xiàn)，此時(shí)，“頁面級(jí)別的 .json 配置文件”就可以實(shí)現(xiàn)這種需求。

注意：當(dāng)頁面配置與全局配置沖突時(shí)，根據(jù)就近原則，最終的效果以頁面配置為準(zhǔn)。

頁面配置中常用的配置項(xiàng)

小結(jié)

這一塊內(nèi)容其實(shí)就是頁一些的簡(jiǎn)單樣式配置，在我們熟悉的小程序中大家都能看到，這部分內(nèi)容相對(duì)來說非常簡(jiǎn)單，不用去過多的記住，心里有一個(gè)大概即可，等項(xiàng)目開發(fā)需要的時(shí)候看看配置的屬性即可！

到此這篇關(guān)于微信小程序全局配置以及頁面配置詳解的文章就介紹到這了,更多相關(guān)小程序全局配置及頁面配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論