Analyse approfondie de la configuration globale dans les mini-programmes

Cet article parlera de la configuration globale dans le mini-programme et découvrira les éléments de configuration courants et les fichiers de configuration de page dans le mini-programme. J'espère qu'il vous sera utile !

Fichiers de configuration globaux et éléments de configuration couramment utilisés

Le fichier app.json dans le répertoire racine du mini-programme est le fichier de configuration globale du mini-programme. Les configurations couramment utilisées sont les suivantes : app.json 文件是小程序的全局配置文件。常用的配置如下：

• pages：记录当前小程序所有页面的存放路径
• window：全局设置小程序窗口的外观
• tabBar：设置小程序底部的 tabBar 效果
• style
  • pages : enregistre le chemin de stockage de toutes les pages du mini-programme actuel
  • window : définie globalement l'apparence de la fenêtre du mini programme
  • tabBar : Définissez l'effet tabBar en bas du mini programme
  • style : S'il faut activer la nouvelle version du style de composant [Recommandations d'apprentissage associées :
  Tutoriel de développement de mini programme

  ---

  】

  fenêtre

  Composants de la mini fenêtre de programme

  

  fenêtre Configuration commune itemsNom de l'attributTypeValeur par défautDescriptionnavigationBarTitleTextStringStringNavi Contenu du texte du titre de la barre de navigationnavigationBarBackgroundColorHexColor #00 0000Couleur d'arrière-plan de la barre de navigationnavigationBarTextStyleStringwhiteCouleur du titre de la barre de navigation, prend uniquement en charge le noir/blancbackgroundColorHexColor# ffffffCouleur de fond du windowbackgroundTextStyleString darkchargement déroulant Le style ne prend en charge que dark/lightenablePullDownRefreshBooleanfalseS'il faut activer pull -actualisation globale onReachBottomDistanceNumber50page L'événement pull-up bottom est déclenché à partir du bas de la page, l'unité est px🎜🎜🎜

  Définissez le titre de la barre de navigation

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

  

  tabBar 的 6 个部分

  

  tabBar 常用配置项

  • tabBar 组件的配置项

    Définissez la couleur d'arrière-plan de la barre de navigationapp.json -> fenêtre -> navigationBarBackgroundColorapp.json -> Activer l'actualisation déroulante globalement (dans <span style="font-size: 18px;">app.json</span>Définissez la couleur d'arrière-plan de la fenêtre lors de l'actualisation du menu déroulantLorsque le menu déroulant la fonction d'actualisation est activée globalement, l'arrière-plan de la fenêtre par défaut est blanc. Définir une couleur d'arrière-plan personnalisée pour la fenêtre d'actualisation déroulanteapp.json -> backgroundColorLorsque l'extraction est effectuée, -down La fonction de rafraîchissement est activée globalement, le chargement de la fenêtre par défaut est blanc. Définir l'effet du style de chargement Pull-up vers le bas : utiliser votre doigt sur l'écran Le comportement de tirer vers le haut et de glisser pour charger plus de donnéesapp.json -> window -> onReachBottomDistance

    ---

    tabBar

    属性	类型	必填	默认值	说明
    position	String	否	bottom	tabBar 的位置，仅支持 bottom
    borderStyle	String	否	black	tabbar 上边框的颜色， 仅支持 black / white
    			Définir la couleur du titre de la barre de navigation
    Activez la fonction d'actualisation déroulante dans , cela affectera chaque mini page du programme)		Actualisation déroulante : le comportement de rechargement des données de la page via l'opération coulissante déroulante de votre doigt sur l'écran	app.json -> window -> activatePullDownRefresh
    			Définir le style de chargement lors de l'actualisation du menu déroulant
    app.json -> window -> backgroundTextStyle		Définir la distance de pull-up vers le bas

  • Qu'est-ce que tabBar

    tabBar est un effet de page courant dans les applications mobiles. Il est utilisé pour basculer rapidement entre plusieurs pages. Il est divisé en deux types dans le mini programme :
    Remarque :
    Lorsque la tabBar supérieure est rendue, l'icône n'est pas affichée, seul le texte est affiché6 parties de tabBartabBar Éléments de configuration courantsPropriétésType Obligatoire Valeur par défautDescription positionStringNon

    Bottom. tabBar	Top tabBar		Seuls un minimum de 2 et un maximum de 5 onglets peuvent être configurés dans tabBar
    			éléments de configuration du composant tabBar

    🎜bottom🎜🎜tabBar position, ne prend en charge que bottom 🎜🎜🎜🎜borderStyle 🎜🎜String🎜🎜Non🎜 🎜noir 🎜🎜bordure supérieure de la barre de tabulation Couleur, ne prend en charge que noir/ 🎜selectedColor🎜🎜HexColor🎜🎜No🎜🎜🎜🎜🎜tabBar La couleur par défaut du texte lorsqu'il est sélectionné🎜🎜🎜🎜backgroundColor🎜🎜HexColor 🎜🎜Non🎜🎜🎜🎜🎜couleur d'arrière-plan de la barre d'onglets🎜🎜🎜🎜list🎜🎜Array🎜🎜 Il s'agit d'une liste d'onglets de 🎜🎜🎜🎜🎜tabBar, avec un minimum de 2 et un maximum de 5 🎜🎜 🎜🎜🎜 🎜🎜Options de configuration pour chaque élément de l'onglet🎜🎜🎜🎜🎜Attributs🎜🎜Type🎜🎜Obligatoire🎜🎜Description 🎜 🎜🎜🎜🎜🎜pagePath🎜🎜String🎜🎜 est le 🎜 🎜 chemin de page, qui doit être défini en premier dans les pages 🎜 🎜🎜🎜text🎜🎜String🎜🎜 est le texte du bouton sur 🎜🎜tab🎜🎜🎜 🎜iconPath🎜🎜String🎜🎜 Non🎜🎜Chemin de l'image, la limite de taille de l'icône est de 40 Ko, la taille recommandée est de 81px * 81px, images réseau ne sont pas supporté🎜🎜🎜🎜selectedIconPath🎜🎜String🎜🎜No🎜🎜Chemin de l'image lorsqu'il est sélectionné, la limite de taille de l'icône est de 40 Ko, la taille recommandée est de 81 px * 81 px, ne prend pas en charge les images réseau 🎜🎜🎜🎜

  ---

  Fichier de configuration de page

  Le rôle du fichier de configuration de page

  Dans l'applet, chaque page possède son propre fichier de configuration .json, qui permet de configurer la fenêtre de la page actuelle Configurer l'apparence, les effets de la page, etc. .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置

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

  • 小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现

  • 对小程序中某个页面想要拥有特殊的窗口表现，此时需要对页面级别的 .json

  • La relation entre la configuration de la page et la configuration globale
  Dans le mini programme, fenêtre dans app .json Node, vous pouvez configurer globalement les performances de fenêtre de chaque page dans le mini programme

  Si vous souhaitez avoir des performances de fenêtre spéciales pour une certaine page dans le mini programme, vous devez configurer la page -level Fichier .json Apporter des modifications

  Remarque :Lorsque la configuration de la page entre en conflit avec la configuration globale, basée sur le principe de proximité, l'effet final sera basé sur la configuration de la pageÉléments de configuration couramment utilisés dans la configuration de la pageCouleur d'arrière-plan de la barre de navigation actuelle whiteCouleur du titre de la barre de navigation, ne prend en charge que le noir/blancnavigationBarTitleTextStringContenu actuel du titre de la barre de navigation La couleur d'arrière-plan de la fenêtre actuelleLe style du chargement déroulant de la page actuelle, ne prend en charge que sombre/clairS'il faut activer l'actualisation du menu déroulant pour la page actuelle

  Propriétés	Type	Valeur par défaut	Description
  	navigationBarBackgroundColor	HexColor	#000000
  	navigationBarTextStyle	String
  	backgroundColor	HexColor	#ffffff
  	backgroundTextStyle	String	dark
  	enablePullDownRefresh	Boolean	false

  onReachBo ttomDistance

  Number🎜🎜50 🎜🎜La distance depuis le bas de la page lorsque l'événement déroulant de la page est déclenché, en px🎜🎜🎜🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!