Mécanisme de la Pile de Pages

Dans l'architecture des Mini Programmes WeChat, la gestion du flux entre les écrans s'effectue grâce à un système de pile similarie au modèle Activity sous Android ou ViewController sous iOS. Cette structure maintient l'historique de navigation et permet de contrôler le retour en arrière.

Il est impératif de noter que la profondeur maximale de cette pile est limitée à cinq niveaux pour éviter une consommation excessive de mémoire. De plus, les pages définies dans la configuration tabBar obéissent à des règles spécifiques conecrnant leur gestion dans la pile.

API de Navigation Principales

L'interaction utilisateur déclenche généralemant les transitions via les appels API suivants, qui modifient l'état de la pile différemment :

• wx.navigateTo : Empile une nouvelle page au-dessus de celle actuelle. La page courante reste préservée, permettant aux utilisateurs de revenir en arrière via le bouton retour système ou wx.navigateBack.
• wx.redirectTo : Supprime la page actuelle avant d'ouvrir la nouvelle destination. Le bouton retour système ne ramènera pas à l'écran précédent, car celui-ci n'existe plus dans la pile. Ce mode est utile pour forcer une transition définitive.
• wx.switchTab : Utilisé exclusivement pour basculer vers les pages enregistrées dans le tabBar. Cette action ferme toutes les autres pages non-tabar dans la pile avant de charger la cible. Notez que cette méthode ne peut pas être utilisée pour accéder à des pages ordinaires.
• wx.navigateBack : Permet de retourner vers une page antérieure de la pile. L'argument delta spécifie le nombre de niveaux à remonter.

Exemple d'Implémentation en JavaScript

Voici une modification de la logique de déplacement. Ici, nous utilisons des variables explicites pour gérer les identifiants de session et la profondeur de retour.

exitCurrentFlow() { // Exemple : Redirection sans retour possible wx.redirectTo({ url: '/pages/login/authCheck' }); },

returnHistory() { // Retour à la page précédente immédiate wx.navigateBack({ delta: 1 }); } })

</div>### Utilisation du Composant Déclaratif

Pour des besoins plus simples sans intervention JavaScript directe, le composant `<navigator>` offre une approche déclarative intégrée au moteur de rendu.

<div>```
<!-- Fichier WXML -->
<navigator 
  open-type="navigate" 
  url="/pages/details/info?id=42" 
  hover-class="nav-pressed">
  Voir les détails
</navigator>

Transfert de Données Via l'URL

Les paramètres peuvent être injectés directement dans la chaîne de recherche de l'URL. Lors du chargement de la page cible, ces données sont accessibles dans la méthode de cycle de vie onLoad.

// Réception dans la page cible (order.js) Page({ onLoad(queryParams) { const referenceId = queryParams.orderId; const origin = queryParams.source || 'direct'; console.log(Commande ${referenceId} issue de : ${origin}); } })

</div>Syntaxe des requêtes : Séparez la base de l'URL par un point d'interrogation (`?`) et utilisez un esperluette (`&`) pour ajouter plusieurs couples clé-valeur.