Pour développer rapidement une application e-commerce avec TDesign, la création d'une barre de navigation inférieure sur mesure représente souvent le premier défi technique significatif. De nombreux développeurs rencontrent des difficultés : les icônes ne s'affichent pas après la configuration de app.json, ou l'utilisation des composants TDesign pour un design plus élaboré semble complexe. En réalité, la mise en place d'une barre de navigation fonctionnelle et esthétique avec TDesign est bien plus accessible qu'on ne le pense. Ce guide pratique décortique le processus pas à pas, en expliquant la logique sous-jacente à chaque configuration, permettant de résoudre des problèmes similaires à l'avenir.

Initialisation du projet et structure des pages

Avant d'implémenter le code de navigation, une structure de projet claire est essentielle. Pour une application e-commerce typique, quatre pages fondamentales sont généralement nécessaires : accueil, catégories, panier et profil utilisateur.

Créez un nouveau projet dans l'outil de développement WeChat. Commencez par établir les dossiers de pages dans le répertoire pages. Une méthode efficace consiste à créer d'abord les dossiers, puis à utiliser la fonction "Nouvelle Page" du menu contextuel pour générer automatiquement les quatre fichiers requis (.js, .json, .wxml, .wxss).

pages/
├── accueil/
│   ├── accueil.js
│   ├── accueil.json
│   ├── accueil.wxml
│   └── accueil.wxss
├── categories/
│   ├── index.js
│   ├── index.json
│   ├── index.wxml
│   └── index.wxss
├── panier/
│   ├── index.js
│   ├── index.json
│   ├── index.wxml
│   └── index.wxss
└── profil/
    ├── index.js
    ├── index.json
    ├── index.wxml
    └── index.wxss

Enregistrez ensuite ces pages dans le tableau pages du fichier app.json. L'ordre détermine la page de démarrage initiale :

{
  "pages": [
    "pages/accueil/accueil",
    "pages/categories/index",
    "pages/panier/index",
    "pages/profil/index"
  ]
}

Differentiation entre TabBar native et mode personnalisé

Le framework WeChat propose deux approches pour la navigation inférieure : le composant TabBar natif et un mode personnalisé.

La configuration native se fait intégralement dans app.json. Elle offre simplicité et performance, mais des possibilités de personnalisation limitées :

"tabBar": {
  "color": "#808080",
  "selectedColor": "#E85D2C",
  "background": "#F8F8F8",
  "list": [
    {
      "cheminPage": "pages/accueil/accueil",
      "label": "Accueil",
      "icone": "assets/nav/home.png",
      "iconeActive": "assets/nav/home_on.png"
    }
    // ... autres onglets
  ]
}

Cette approche native convient aux interfaces standard, mais ne permet pas facilement d'obtenir des designs avancés comme un bouton central surélevé ou des animations personnalisées. Pour une expérience e-commerce distinctive, le mode personnalisé combiné avec les composants TDesign deviant nécessaire.