全局配置文件及常用的配置項

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

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

window

小程序窗口的組成部分

window 常用配置項

設置導航欄的標題

app.json -> window -> navigationBarTitleText

設置導航欄的背景色

app.json -> window -> navigationBarBackgroundColor

設置導航欄標題顏色

app.json -> window -> enablePullDownRefresh

全局開啟下拉刷新（在 app.json 中啟用下拉刷新功能，會作用于每個小程序頁面）

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

app.json -> window -> enablePullDownRefresh

設置下拉刷新時窗口的背景色

當全局開啟下拉刷新功能后，默認的窗口背景為白色。設置自定義下拉刷新窗口背景色

app.json -> window -> backgroundColor

設置下拉刷新時 loading 的樣式

當全局開啟下拉刷新功能后，默認的窗口的 loading 為白色。設置 loading 樣式的效果

app.json -> window -> backgroundTextStyle

設置上拉觸底的距離

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

app.json -> window -> onReachBottomDistance

tabBar

什么是tabBar

• tabBar是移動端應用常見的頁面效果，用于實現(xiàn)多頁面的快速切換，小程序中將其分為倆種：
  • 底部 tabBar
  • 頂部 tabBar
• 注意：
  • tabBar 中只能配置最少2個，最多5個 tab 頁簽
  • 當渲染頂部 tabBar 時，不顯示 icon，只顯示文本

tabBar 的 6 個部分

tabBar 常用配置項

• tabBar 組件的配置項

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

• 每個 tab 項的配置選項

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

頁面配置文件

頁面配置文件的作用

小程序中，每個頁面都有自己的 .json 配置文件，用來對當前頁面的窗口外觀、頁面效果等進行配置

頁面配置和全局配置的關系

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

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

• 注意：

  當頁面配置與全局配置沖突時，根據(jù)就近原則，最終的效果以頁面配置為準

頁面配置中常用的配置項

總結

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

最新評論