如何深入淺析小程序中的全局配置

本篇文章給大家分享的是有關如何深入淺析小程序中的全局配置，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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

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

• pages：記錄當前小程序所有頁面的存放路徑

• window：全局設置小程序窗口的外觀

• tabBar：設置小程序底部的 tabBar 效果

• style：是否啟用新版的組件樣式   【相關學習推薦：小程序開發教程】

window

小程序窗口的組成部分

window 常用配置項

設置導航欄的標題

app.json -> window -> navigationBarTitleText

設置導航欄的背景色

app.json -> window -> navigationBarBackgroundColor

設置導航欄標題顏色

app.json -> window -> enablePullDownRefresh

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

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

app.json -> window -> enablePullDownRefresh

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

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

app.json -> window -> backgroundColor

設置下拉刷新時 loading 的樣式

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

app.json -> window -> backgroundTextStyle

設置上拉觸底的距離

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

app.json -> window -> onReachBottomDistance

tabBar

什么是tabBar

• tabBar是移動端應用常見的頁面效果，用于實現多頁面的快速切換，小程序中將其分為倆種：

• 底部 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，不支持網絡圖片
  selectedIconPath	String	否	選中時的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網絡圖片

頁面配置文件

頁面配置文件的作用

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

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

• 小程序中，app.json 中的 window 節點，可以全局配置小程序中每個頁面的窗口表現

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

• 注意：

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

頁面配置中常用的配置項

小程序是什么意思

小程序是一種不需要下載安裝即可使用的應用，通過掃描二維碼或是搜一搜立即使用，操作簡單，便于傳播，能夠實現消息通知、線下掃碼、公眾號關聯等七大功能。它基于微信運行的，類似于APP，想用就用，用完即走，不會占用內存。

以上就是如何深入淺析小程序中的全局配置，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。