Navigation inférieure de développement de mini-programmes WeChat

Développement du programme WeChat Mini

Introduction :

L'architecture d'application d'un ensemble de logiciels comprend plusieurs couches telles que la couche de données, la couche de logique métier, la couche de service, la couche de contrôle, la couche d'affichage et l'utilisateur.

Fichier de configuration principal app.json :

Le fichier de configuration principal app.json se trouve dans le répertoire principal du projet et sert à configurer globalement le projet en cours.

L'exemple de code est le suivant :

{
  "pages": [
    "pages/index/index",
    "pages/new/new",
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "我的第一个小程序",
    "navigationBarTextStyle": "black"
  }
}

Il y a deux pages dans le code ci-dessus. Il s'agit d'un objet json. L'attribut pages est utilisé pour définir la page du mini programme. , l'un nommé "index", situé sous "pages/index", et l'autre nommé new, situé sous "page/new".

Le premier élément du tableau pages représente la page initiale du mini programme, c'est-à-dire la page qui sera exécutée et affichée au démarrage du mini programme. Si vous continuez à ajouter des pages, vous pouvez les ajouter au tableau pages.

État de configuration :

backgroundColor : utilisé pour définir la couleur d'arrière-plan de la fenêtre, qui est la même que le paramètre de couleur en HTML. Utilisez RVB hexadécimal pour définir la couleur. La valeur par défaut est blanche.

backgroundTextStyle : utilisé pour définir la police d'arrière-plan déroulante et le style de l'image de chargement, avec deux valeurs : "dark" et "light".

enablePullDownRefresh : utilisé pour définir s'il faut activer l'actualisation déroulante, la valeur par défaut est false.

navigationBarBackgroundColor : utilisé pour définir la couleur d’arrière-plan de la barre de navigation.

navigationBarTextStyle : définissez la couleur du titre de la barre de navigation.

navigationBarTitleText : définissez le contenu textuel du titre de la barre de navigation.

Configurer la navigation inférieure :

"tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/icon_HOME.png",
      "selectedIconPath": "images/icon_HOMEED.png",
      "lang":"pagePath显示的页面,text文本，iconPath未激活的图标，selectedIconPath激活的图标"
    }, 
    {
      "pagePath": "pages/new/new",
      "text": "广场",
      "iconPath": "images/icon_GUANGCHANG.png",
      "selectedIconPath": "images/icon_GUANGCHANGED.png",
      "lang":"pagePath显示的页面,text文本，iconPath未激活的图标，selectedIconPath激活的图标"
    },
    {
      "pagePath": "pages/userConsole/userConsole",
      "text": "设置",
      "iconPath": "images/icon_SET.png",
      "selectedIconPath": "images/icon_SETED.png",
      "lang":"pagePath显示的页面,text文本，iconPath未激活的图标，selectedIconPath激活的图标"
    }]
  }

tabBar est la navigation inférieure. Il y a trois navigations inférieures dans le code ci-dessus

Couleur : Définissez la couleur du texte de l'état inactif de l'onglet.

selectedColor : définissez la couleur du texte de l'état d'activation de l'onglet.

borderStyle : définissez la bordure de navigation inférieure.

backgroundColor : définissez la couleur d’arrière-plan de la navigation inférieure.

liste : Ceci est un nombre, définissez le nombre de navigation inférieure, minimum 2, maximum 5.

texte : définir le texte de navigation.

La page affichée par pagePath, texte texte, icône inactive iconPath, icône activée selectedIconPath.

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!