微信小程序全局配置以及頁(yè)面配置詳解
全局配置
全局配置文件及常用配置項(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
全局開(kāi)啟下拉刷新功能
概念:下拉刷新是移動(dòng)端的專(zhuān)有名詞,指的是通過(guò)手指在屏幕上的下拉滑動(dòng)操作,從而重新加載頁(yè)面數(shù)據(jù)的行為。
設(shè)置步驟:app.json -> window -> 把 enablePullDownRefresh 的值設(shè)置為 true
注意:在 app.json 中啟用下拉刷新功能,會(huì)作用于每個(gè)小程序頁(yè)面!
設(shè)置下拉刷新時(shí)窗口的背景色
當(dāng)全局開(kāi)啟下拉刷新功能之后,默認(rèn)的窗口背景為白色。如果自定義下拉刷新窗口背景色,設(shè)置步驟為: app.json -> window -> 為 backgroundColor 指定16進(jìn)制的顏色值 #efefef。效果如下:

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

注意: backgroundTextStyle 的可選值只有 light 和 dark
設(shè)置上拉觸底的距離
概念:上拉觸底是移動(dòng)端的專(zhuān)有名詞,通過(guò)手指在屏幕上的上拉滑動(dòng)操作,從而加載更多數(shù)據(jù)的行為。
設(shè)置步驟: app.json -> window -> 為 onReachBottomDistance 設(shè)置新的數(shù)值
注意:默認(rèn)距離為0,如果沒(méi)有特殊需求,建議使用默認(rèn)值即可。
全局配置—tabbar
什么是tabbar
tabBar 是移動(dòng)端應(yīng)用常見(jiàn)的頁(yè)面效果,用于實(shí)現(xiàn)多頁(yè)面的快速切換。小程序中通常將其分為:
- 底部 tabBar
- 頂部 tabBar

注意:
tabBar中只能配置 最少 2 個(gè) 、 最多 5 個(gè) tab 頁(yè)簽當(dāng)渲染 頂部 tabBar 時(shí), 不顯示 icon ,只顯示文本
tabbar的6個(gè)組成部分

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

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

頁(yè)面配置
頁(yè)面配置文件的作用
小程序中,每個(gè)頁(yè)面都有自己的 .json 配置文件,用來(lái)對(duì)當(dāng)前頁(yè)面的窗口外觀、頁(yè)面效果等進(jìn)行配置。
頁(yè)面配置和全局配置的關(guān)系
小程序中,app.json 中的 window 節(jié)點(diǎn),可以全局配置小程序中每個(gè)頁(yè)面的窗口表現(xiàn)。
如果某些小程序頁(yè)面想要擁有特殊的窗口表現(xiàn),此時(shí),“頁(yè)面級(jí)別的 .json 配置文件”就可以實(shí)現(xiàn)這種需求。
注意:當(dāng)頁(yè)面配置與全局配置沖突時(shí),根據(jù)就近原則,最終的效果以頁(yè)面配置為準(zhǔn)。
頁(yè)面配置中常用的配置項(xiàng)

小結(jié)
這一塊內(nèi)容其實(shí)就是頁(yè)一些的簡(jiǎn)單樣式配置,在我們熟悉的小程序中大家都能看到,這部分內(nèi)容相對(duì)來(lái)說(shuō)非常簡(jiǎn)單,不用去過(guò)多的記住,心里有一個(gè)大概即可,等項(xiàng)目開(kāi)發(fā)需要的時(shí)候看看配置的屬性即可!
到此這篇關(guān)于微信小程序全局配置以及頁(yè)面配置詳解的文章就介紹到這了,更多相關(guān)小程序全局配置及頁(yè)面配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS在TextArea光標(biāo)位置插入文字并實(shí)現(xiàn)移動(dòng)光標(biāo)到文字末尾
JS在TextArea光標(biāo)位置插入文字+移動(dòng)光標(biāo)到文字末尾,F(xiàn)irefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd屬性,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-06-06
微信小程序開(kāi)發(fā)中生命周期的詳細(xì)介紹
生命周期是指一個(gè)對(duì)象從創(chuàng)建→>運(yùn)行>銷(xiāo)毀的整個(gè)階段,強(qiáng)調(diào)的是一個(gè)時(shí)間段,文中介紹了小程序中組件的生命周期,需要的朋友可以參考下2023-03-03
js實(shí)現(xiàn)動(dòng)態(tài)增加文件域表單功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)動(dòng)態(tài)增加文件域表單功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10
用JS提交參數(shù)創(chuàng)建form表單在FireFox中遇到的問(wèn)題
在一個(gè)前端頁(yè)面上,需要通過(guò)JavaScript來(lái)提交參數(shù),使用JS創(chuàng)建form表單,將參數(shù)append到表單中進(jìn)行提交,接下來(lái)將介紹如何操作與實(shí)現(xiàn)2013-01-01
javascript實(shí)現(xiàn)頁(yè)面內(nèi)關(guān)鍵詞高亮顯示代碼
關(guān)鍵詞高亮想必大家對(duì)它都不陌生吧,應(yīng)用也比較廣泛的,下面為大家介紹下通過(guò)javascript是如何實(shí)現(xiàn)頁(yè)面內(nèi)關(guān)鍵詞高亮顯示2014-04-04
JavaScript代碼調(diào)試方法實(shí)例小結(jié)
這篇文章主要介紹了JavaScript代碼調(diào)試方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript錯(cuò)誤信息的處理與代碼調(diào)試相關(guān)操作技巧,需要的朋友可以參考下2019-01-01

