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

小程序根目錄下的 app.json 文件是小程序的全局配置文件。常用的配置如下：

• pages：記錄當(dāng)前小程序所有頁(yè)面的存放路徑
• window：全局設(shè)置小程序窗口的外觀
• tabBar：設(shè)置小程序底部的 tabBar 效果
• style：是否啟用新版的組件樣式

window

小程序窗口的組成部分

window 常用配置項(xiàng)

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

app.json -> window -> navigationBarTitleText

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

app.json -> window -> navigationBarBackgroundColor

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

app.json -> window -> enablePullDownRefresh

全局開(kāi)啟下拉刷新（在 app.json 中啟用下拉刷新功能，會(huì)作用于每個(gè)小程序頁(yè)面）

下拉刷新：通過(guò)手指在屏幕上的下拉滑動(dòng)操作，從而重新加載頁(yè)面數(shù)據(jù)的行為

app.json -> window -> enablePullDownRefresh

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

當(dāng)全局開(kāi)啟下拉刷新功能后，默認(rèn)的窗口背景為白色。設(shè)置自定義下拉刷新窗口背景色

app.json -> window -> backgroundColor

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

當(dāng)全局開(kāi)啟下拉刷新功能后，默認(rèn)的窗口的 loading 為白色。設(shè)置 loading 樣式的效果

app.json -> window -> backgroundTextStyle

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

上拉觸底：通過(guò)手指在屏幕上的上拉滑動(dòng)操作，從而加載更多數(shù)據(jù)的行為

app.json -> window -> onReachBottomDistance

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 常用配置項(xiàng)

• tabBar 組件的配置項(xiàng)

  屬性	類(lèi)型	必填	默認(rèn)值	說(shuō)明
  position	String	否	bottom	tabBar 的位置，僅支持 bottom
  borderStyle	String	否	black	tabbar 上邊框的顏色， 僅支持 black / white
  color	HexColor	否		tabBar上文字的默認(rèn)顏色（未選中）
  selectedColor	HexColor	否		tabBar選中時(shí)文字的默認(rèn)顏色
  backgroundColor	HexColor	否		tabBar的背景色
  list	Array	是		tabBar的頁(yè)簽列表，最少2個(gè)，最多5個(gè)

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

  屬性	類(lèi)型	必填	說(shuō)明
  pagePath	String	是	頁(yè)面路徑，必須在 pages 中先定義
  text	String	是	tab 上按鈕文字
  iconPath	String	否	圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片
  selectedIconPath	String	否	選中時(shí)的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網(wǎng)絡(luò)圖片

頁(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)

• 對(duì)小程序中某個(gè)頁(yè)面想要擁有特殊的窗口表現(xiàn)，此時(shí)需要對(duì)頁(yè)面級(jí)別的 .json 文件進(jìn)行修改

• 注意：

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

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

總結(jié)

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

最新評(píng)論