Une introduction à la configuration de la barre de navigation inférieure pour les mini-programmes WeChat

Cet article présente principalement les informations pertinentes sur l'explication détaillée de la méthode de configuration de la colonne de navigation inférieure de l'applet WeChat. Les amis dans le besoin peuvent se référer à

L'explication détaillée de la méthode de. définir la colonne de navigation inférieure de l'applet WeChat

Je voulais avoir une belle colonne de navigation en bas du mini programme, mais je ne savais pas comment la faire, alors Baidu a trouvé cet article et je l'ai partagé avec tout le monde.

D'accord, le titre d'en-tête du mini programme est défini, parlons de la façon d'implémenter la barre de navigation inférieure.

Regardons d'abord les rendus

Ici, nous avons ajouté trois icônes de navigation, car nous avons trois pages, et le mini programme peut ajouter jusqu'à 5 personnes.

Alors comment apparaissent-ils et comment sont-ils colorés ? C'est fait en deux étapes !

1. Préparation des icônes

Bibliothèque d'icônes Alibaba

Nous entrons dans le site Web, faites glisser la souris sur une icône que vous aimez et cliquez ci-dessous Bouton de téléchargement

Choisissez deux icônes de couleurs différentes dans la boîte contextuelle. Choisissez simplement la taille de 64px, j'ai choisi png. Ensuite, téléchargez-le et donnez-lui un alias. 🎜>

Enregistrez l'icône nommée ci-dessus dans le dossier images nouvellement créé dans le répertoire du projet du mini programme, et les préparatifs sont prêts

2. Modifiez le fichier de configuration

Nous trouvons le fichier de configuration app.json dans le répertoire racine du projet et ajoutons les informations de configuration suivantes

"tabBar": { 
  "color": "#a9b7b7", 
  "selectedColor": "#11cd6e", 
  "borderStyle":"white", 
  "list": [{ 
   "selectedIconPath": "images/111.png", 
   "iconPath": "images/11.png", 
   "pagePath": "pages/index/index", 
   "text": "首页" 
  }, { 
   "selectedIconPath": "images/221.png", 
   "iconPath": "images/22.png", 
   "pagePath": "pages/logs/logs", 
   "text": "日志" 
  }, { 
   "selectedIconPath": "images/331.png", 
   "iconPath": "images/33.png", 
   "pagePath": "pages/test/test", 
   "text": "开心测试" 
  }] 
 },

Expliquez les informations d'attribut correspondantes

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!