Eingehende Analyse der globalen Konfiguration in Miniprogrammen-Mini-Programmentwicklung-php.cn

In diesem Artikel geht es um die globale Konfiguration im Miniprogramm und um mehr über die allgemeinen Konfigurationselemente und Seitenkonfigurationsdateien im Miniprogramm. Ich hoffe, dass er für Sie hilfreich ist!

Eingehende Analyse der globalen Konfiguration in Miniprogrammen

Globale Konfigurationsdateien und häufig verwendete Konfigurationselemente

Die Datei app.json im Stammverzeichnis des Miniprogramms ist die globale Konfigurationsdatei des Miniprogramms. Häufig verwendete Konfigurationen sind wie folgt: app.json 文件是小程序的全局配置文件。常用的配置如下：

pages：记录当前小程序所有页面的存放路径
window：全局设置小程序窗口的外观
tabBar：设置小程序底部的 tabBar 效果

style

pages: Speicherpfad aller Seiten des aktuellen Miniprogramms aufzeichnen
window: Global festgelegt das Erscheinungsbild des Miniprogrammfensters
tabBar: Legen Sie den tabBar-Effekt am unteren Rand des Miniprogramms fest
Stil : Ob die neue Version des Komponentenstils aktiviert werden soll [Verwandte Lernempfehlungen:

Mini-Programmentwicklungs-Tutorial

]

Fenster

Komponenten des Mini-Programmfensters

Eingehende Analyse der globalen Konfiguration in Miniprogrammen

Fenster Gemeinsame Konfiguration itemsAttributnameTyp StandardwertBeschreibungnavigationBarTitleTextStringString Textinhalt des Titels der NavigationsleistenavigationBarBackgroundColorHexColor #00 0000Hintergrundfarbe der NavigationsleistenavigationBarTextStyleStringweißTitelfarbe der Navigationsleiste, unterstützt nur Schwarz/WeißHintergrundfarbeHexColor #ffffffHintergrundfarbe des windowbackgroundTextStyleString dark Dropdown-Laden Der Stil unterstützt nur Dunkel/HellenablePullDownRefreshBooleanfalseGibt an, ob die Pulldown-Aktualisierung global aktiviert werden soll lyonReachBottomDistance Anzahl50Seite Das Pull-Up-Bottom-Ereignis wird vom unteren Rand der Seitenentfernung ausgelöst, die Einheit ist px

🎜🎜🎜

Legen Sie den Titel der Navigationsleiste fest.

app.json -> window -> navigationBarTitleTextapp.json -> window -> navigationBarTitleText

设置导航栏的背景色

app.json -> window -> navigationBarBackgroundColor

设置导航栏标题颜色

app.json -> window -> enablePullDownRefresh

全局开启下拉刷新（在 <span style="font-size: 18px;">app.json</span> 中启用下拉刷新功能，会作用于每个小程序页面）

下拉刷新：通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为

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，只显示文本

Eingehende Analyse der globalen Konfiguration in Miniprogrammen

tabBar 的 6 个部分

Eingehende Analyse der globalen Konfiguration in Miniprogrammen

tabBar 常用配置项

tabBar 组件的配置项

Legen Sie die Hintergrundfarbe der Navigationsleiste fest >app.json -> window -> navigationBarBackgroundColorapp.json -> enablePullDownRefresh Pulldown-Aktualisierung global aktivieren (in Aktivieren Sie die Pulldown-Aktualisierungsfunktion in, sie wirkt sich auf jede Miniprogrammseite aus) app.json -> window -> enablePullDownRefresh

app.json -> window -> Ihr Finger auf dem Bildschirm. Das Verhalten beim Hochziehen und Schieben, um weitere Daten zu laden ><td></td>

Was ist tabBar

Bottom tabBarTop tabBar Hinweis:

Wenn die obere tabBar gerendert wird, wird das Symbol nicht angezeigt. Es wird nur der Text angezeigt. png" alt="Eingehende Analyse der globalen Konfiguration in Miniprogrammen"/>tabBar Allgemeine Konfigurationselemente

属性	类型	必填	默认值	说明
position	String	否	bottom	tabBar 的位置，仅支持 `bottom`
borderStyle	String	否	black	tabbar 上边框的颜色，仅支持 `black` / `white`
		`<span style="font-size: 18px;">app.json</span>`		Pulldown-Aktualisierung: Das Verhalten beim Neuladen der Seitendaten durch den Pulldown-Schiebevorgang von Ihr Finger auf dem Bildschirm
	Legen Sie die Hintergrundfarbe des Fensters während der Pulldown-Aktualisierung fest		Beim Pulldown Wenn die Aktualisierungsfunktion global aktiviert ist, ist der Standardfensterhintergrund weiß. Legen Sie eine benutzerdefinierte Hintergrundfarbe für das Pulldown-Aktualisierungsfenster fest Die Aktualisierungsfunktion -down ist global aktiviert. Das standardmäßige Laden des Fensters ist weiß. Legen Sie den Effekt des Ladestils fest:
	tabBar ist ein häufiger Seiteneffekt in mobilen Anwendungen. Er wird verwendet, um schnell zwischen mehreren Seiten zu wechseln. Er ist im Miniprogramm in zwei Typen unterteilt:			In der tabBar können nur mindestens 2 und maximal 5 Registerkarten konfiguriert werden
	6 Teile von tabBar

tabBar-Komponentenkonfigurationselemente
EigenschaftenTypErforderlich StandardwertBeschreibung PositionStringNeinbottomtabBar-Position, unterstützt nur bottomborderStyle StringNeinschwarz Farbe des oberen Rands der Registerkartenleiste, unterstützt nur schwarz / weißFarbeHexColorNeinselectedColor

Die Standardfarbe des Textes auf der TabBar (nicht aktiviert)

HexColor🎜🎜No🎜🎜🎜🎜🎜tabBar Die Standardfarbe des Texts, wenn ausgewählt🎜🎜🎜🎜backgroundColor🎜🎜HexColor🎜🎜No 🎜🎜🎜🎜🎜Tab-Bar-Hintergrund color🎜🎜🎜🎜list🎜🎜Array🎜🎜 Es handelt sich um eine Tab-Liste von 🎜🎜🎜🎜🎜tabBar, mit mindestens 2 und maximal 5 🎜🎜🎜🎜🎜🎜🎜Konfigurationsoptionen für jedes Tab-Element🎜 🎜🎜 🎜🎜Attributes🎜🎜Type🎜🎜Required🎜🎜Description 🎜 🎜🎜🎜🎜🎜pagePath🎜🎜String🎜🎜 ist der 🎜🎜 Seitenpfad, der zuerst in Seiten 🎜🎜🎜 definiert werden muss 🎜text🎜🎜String🎜🎜 ist der Schaltflächentext auf 🎜🎜Tab🎜🎜🎜 🎜iconPath🎜🎜String🎜🎜 Nein🎜🎜Bildpfad, Symbolgrößenbeschränkung ist 40 KB, empfohlene Größe ist 81px * 81px, Netzwerkbilder werden nicht unterstützt🎜🎜🎜🎜selectedIconPath🎜 🎜String🎜🎜 Nein🎜🎜Bildpfad bei Auswahl, Symbolgrößenbeschränkung beträgt 40 KB, empfohlene Größe ist 81 Pixel * 81 Pixel, Netzwerkbilder werden nicht unterstützt 🎜🎜🎜🎜

Seitenkonfigurationsdatei

Die Rolle der Seitenkonfigurationsdatei

Im Applet verfügt jede Seite über eine eigene .json-Konfigurationsdatei, die zum Konfigurieren des Fensters verwendet wird die aktuelle Seite Konfigurieren Sie das Erscheinungsbild, Seiteneffekte usw. .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置

页面配置和全局配置的关系

小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现
对小程序中某个页面想要拥有特殊的窗口表现，此时需要对页面级别的 .json
Die Beziehung zwischen Seitenkonfiguration und globaler Konfiguration

window

app .json

Wenn Sie eine spezielle Fensterleistung für eine bestimmte Seite im Miniprogramm haben möchten, müssen Sie die Seite konfigurieren -level .json-Datei Nehmen Sie Änderungen vor

Hinweis:Wenn die Seitenkonfiguration mit der globalen Konfiguration in Konflikt steht, basierend auf dem Proximity-Prinzip, basiert der endgültige Effekt auf der SeitenkonfigurationHäufig verwendete Konfigurationselemente in der SeitenkonfigurationNavigationsleisten-Titelfarbe, unterstützt nur Schwarz/WeißnavigationBarTitleTextStringBooleanNumber


Eigenschaften	Typ	Standard. Wert
navigationBarBackgroundColor	HexColor	#000000	Aktuelle Hintergrundfarbe der Navigationsleiste
navigationBarTextStyle	String	white
			Aktueller Navigationsleisten-Titeltext
Hintergrundfarbe	HexFarbe	#ffffff	Die Hintergrundfarbe des aktuellen Fensters
backgroundTextStyle	String	dark	der Stil des Pulldown-Ladens der aktuellen Seite, unterstützt nur Dunkel/hell-reibungsableerpulldownRefresh
false	Ob die Pulldown-Aktualisierung für die aktuelle Seite aktiviert werden soll		onReachBo ttomDistance

Der Abstand vom unteren Rand der Seite, wenn das Seiten-Pulldown-Ereignis ausgelöst wird, in px

🎜🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Programmiervideo🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonEingehende Analyse der globalen Konfiguration in Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!





		Die Standardfarbe des Textes auf der TabBar (nicht aktiviert)