微信小程序全局配置及常用配置項(xiàng)詳解
一、window常用配置
1.小程序根目錄下的app.json文件時(shí)小程序的全局配置文件。常用配置項(xiàng)如下:
① pages
記錄當(dāng)前小程序所有頁(yè)面的存放路徑
② window
全局設(shè)置小程序窗口的外觀
③ tabBar
設(shè)置小程序底部的tabBar效果
④ style
是否啟用新版的組件樣式
2.window常用配置項(xiàng)

3.設(shè)置導(dǎo)航欄的標(biāo)題
設(shè)置步驟:app.json->window->navigationBarTitleText 修改保存即可,導(dǎo)航欄背景顏色修改只支持十六進(jìn)制。
注意:navigationBarTextStyle的可選值只支持black和white。

4.全局開啟下拉刷新功能
設(shè)置步驟:app.json->window->把enablePullDownRefresh的值設(shè)為true
注意:在app.json中啟用下拉刷新功能,會(huì)作用于每個(gè)小程序頁(yè)面。
5.設(shè)置下拉刷新時(shí)窗口的背景顏色
當(dāng)全局開啟下拉刷新功能之后,默認(rèn)的窗口背景為白色。如果自定義下拉刷新窗口背景色,設(shè)置步驟為:app.json->window->為backgroundColor指定16進(jìn)制的顏色值。
6.設(shè)置下拉刷新時(shí)loading的樣式
當(dāng)全局開啟下拉刷新功能之后,默認(rèn)窗口的loading樣式為白色,如果要更改loading樣式的效果,設(shè)置步驟為:app.json->window->為backgroundTextStyle指定dark值(注意:可選值只有l(wèi)ight和dark兩個(gè))。
7.設(shè)置上拉觸底的距離
上拉觸底是移動(dòng)端的專有名詞,通過(guò)手指在屏幕上的上拉滑動(dòng)操作,從而加載更多數(shù)據(jù)的行為。
設(shè)置步驟:app.json->window->為onReachBottomDistance設(shè)置新的值(注意:默認(rèn)距離為50px,沒有特殊需求,建議使用默認(rèn))
二、tabBar全局配置
1.什么是tabBar
tabBar是移動(dòng)端應(yīng)用常見的頁(yè)面效果,用于實(shí)現(xiàn)多頁(yè)面的快速切換,小程序中通常分為底部tabBar和頂部tabBar。
注意:
tabBar中只能配置最少2個(gè),最多5個(gè)tab頁(yè)簽
當(dāng)渲染頂部tabBar時(shí),不顯示icon圖標(biāo),只顯示文本
2.tabBar的6個(gè)組成部分
① backgroundColor:tabBar的背景色
② selectedIconPath:選中時(shí)的圖片路徑
③ borderStyle:tabBar上邊框的顏色
④ iconPath:未選中時(shí)的圖片路徑
⑤ selectedColor:tab上的文字選中時(shí)的顏色
⑥ color:tab上文字的默認(rèn)(未選中)顏色
3.tabBar節(jié)點(diǎn)配置項(xiàng)

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

window節(jié)點(diǎn)平級(jí)定義tabBar節(jié)點(diǎn):
"tabBar": {
"list": [
{
// 定義的頁(yè)面路徑
"pagePath": "pages/list/list",
"text": "首頁(yè)"
},
{
"pagePath": "pages/test/test",
"text": "我的"
}
]
},注意:tabPage頁(yè)面的組件要放到pages節(jié)點(diǎn)內(nèi)部最前面,否則頁(yè)面沒效果。
三、頁(yè)面配置文件
1.頁(yè)面配置文件的作用
小程序中,每個(gè)頁(yè)面都有自己的.json配置文件,用來(lái)對(duì)當(dāng)前頁(yè)面的窗口外觀,頁(yè)面效果等進(jìn)行配置。
2.頁(yè)面配置和全局配置的關(guān)系
小程序中,app.json中的window節(jié)點(diǎn),可以全局配置小程序中每個(gè)頁(yè)面的窗口表現(xiàn)。如果某些小程序頁(yè)面想要擁有特殊的窗口表現(xiàn),此時(shí),頁(yè)面的.json配置文件就可以實(shí)現(xiàn)這種需求。
注意:當(dāng)頁(yè)面配置與全局配置沖突時(shí),根據(jù)就近原則,最終的效果以頁(yè)面配置為準(zhǔn)。
3.頁(yè)面配置中常用的配置項(xiàng)

到此這篇關(guān)于微信小程序全局配置及常用配置項(xiàng)詳解的文章就介紹到這了,更多相關(guān)小程序全局配置 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)的加減乘除四則運(yùn)算計(jì)算器示例
這篇文章主要介紹了JS實(shí)現(xiàn)的加減乘除四則運(yùn)算計(jì)算器,涉及javascript事件響應(yīng)及數(shù)學(xué)運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2017-08-08
15 個(gè) JavaScript Web UI 庫(kù)
本文介紹了 15 個(gè)非常強(qiáng)大的 JavaScript Web UI 庫(kù),非常適合各種各種規(guī)模的富 Web 應(yīng)用的開發(fā)。2010-05-05
微信小程序登錄時(shí)如何獲取input框中的內(nèi)容
這篇文章主要介紹了微信小程序登錄時(shí)如何獲取input框中的內(nèi)容,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
JavaScript生成隨機(jī)驗(yàn)證碼代碼實(shí)例
這篇文章主要介紹了JavaScript生成隨機(jī)驗(yàn)證碼代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
Bootstrap每天必學(xué)之級(jí)聯(lián)下拉菜單
Bootstrap每天必學(xué)之級(jí)聯(lián)下拉菜單,主要應(yīng)用場(chǎng)合有省市級(jí)關(guān)聯(lián)菜單等,感興趣的小伙伴們可以參考一下2016-03-03
js從10種顏色中隨機(jī)取色實(shí)現(xiàn)每次取出不同的顏色
昨天在做js 從10種顏色中隨機(jī)取色,并每次取出的顏色不同,具體的實(shí)現(xiàn)思路如下,感興趣的朋友可以參考下2013-10-10

