Comment fermer une page dans uniapp

Uniapp est un cadre de développement multiplateforme qui permet aux développeurs d'écrire simultanément des applications pour iOS, Android, H5 et d'autres plates-formes, améliorant considérablement l'efficacité du développement et réduisant les coûts de développement. Dans le processus de développement d'applications Uniapp, il est souvent nécessaire d'implémenter la fonction de fermeture d'une certaine page. Cet article explique comment fermer une page spécifiée dans Uniapp.

1. Fermez la page via la gestion de la pile de pages

Dans l'application Uniapp, les sauts de page sont implémentés via la gestion de la pile de pages. La pile de pages est une structure de données utilisée pour stocker la relation de saut entre les pages. Chaque fois que vous passez à une nouvelle page, la page est ajoutée en haut de la pile de pages. Lorsque vous revenez de la page ou fermez la page. sera extrait de la pile de pages. Par conséquent, la fonction de fermeture de la page spécifiée peut être réalisée en faisant fonctionner la pile de pages.

Uniapp fournit plusieurs API pour gérer les piles de pages, dont les plus couramment utilisées sont uni.navigateBack et uni.reLaunch. uni.navigateBack est utilisé pour fermer la page actuelle et revenir à la page précédente, et uni.reLaunch est utilisé pour fermer toutes les pages et accéder à une certaine page de l'application. Cependant, ces deux API ne prennent pas en charge la fermeture directe de la page spécifiée. Par conséquent, il est nécessaire de combiner l'API uni.getCurrentPages pour obtenir des informations sur la pile de pages afin de réaliser la fonction de fermeture de la page spécifiée.

uni.getCurrentPages est utilisé pour obtenir les informations de la pile de pages actuelle et renvoyer un tableau contenant tous les objets de la page. Le dernier élément du tableau est l'objet de la page actuelle. En parcourant les objets de page de ce tableau, recherchez l'index de l'objet de page qui doit être fermé et utilisez uni.navigateBack ou uni.reLauch pour fermer la page.

Ce qui suit est un exemple de code :

function closePage(pageName) {
  const pages = getCurrentPages();
  const len = pages.length;
  for (let i = 0; i < len; i++) {
    const page = pages[i];
    if (page.route === pageName) {
      const delta = len - i - 1;
      uni.navigateBack({
        delta: delta,
      });
      break;
    }
  }
}

Cet exemple de code définit une fonction closePage, qui reçoit le nom de la page qui doit être fermée, pageName, en tant que paramètre. Tout d'abord, obtenez les informations actuelles sur la pile de pages via uni.getCurrentPages, puis parcourez le tableau d'objets de page, recherchez l'objet de page dont l'attribut route est égal à pageName, calculez le nombre de niveaux de pages à renvoyer et enfin utilisez uni.navigateBack pour fermez la page cible.

2. Fermez la page via le bus d'événements

Le bus d'événements est un modèle largement utilisé dans le développement front-end pour établir la communication entre les composants. Dans Uniapp, le bus d'événements peut également être utilisé pour mettre en œuvre la communication entre les pages, y compris la fonction de fermeture d'une page spécifiée.

Pour implémenter le bus d'événements, vous devez utiliser le mécanisme réactif de vue.js en créant une instance de vue globale en tant que bus d'événements, d'autres composants ou pages peuvent déclencher et écouter des événements respectivement via les méthodes $emit et $on. de l'instance. Les paramètres peuvent être transmis lors du déclenchement de l'événement, et l'événement d'écoute recevra les paramètres portés par l'événement et pourra les gérer en conséquence.

Ce qui suit est un exemple de code :

// event-bus.js
import Vue from 'vue';
export default new Vue();

// Page1.vue
import eventBus from '@/event-bus';
export default {
  methods: {
    onClosePage() {
      eventBus.$emit('closePage', 'Page2');
    },
  },
}

// Page2.vue
import eventBus from '@/event-bus';
export default {
  created() {
    eventBus.$on('closePage', (pageName) => {
      if (this.$options.name === pageName) {
        uni.navigateBack();
      }
    });
  },
}

Dans cet exemple de code, une instance eventBus est d'abord créée pour servir de bus d'événements. Ensuite, dans la page Page1, lorsque la page Page2 doit être fermée, eventBus.$emit est utilisé pour déclencher l'événement, le nom de l'événement est « closePage » et le nom de la page qui doit être fermée est transmis. Dans la page Page2, écoutez l'événement 'closePage' et obtenez le nom du composant de page actuel via this.$options.name Lorsque le nom est égal au nom de page pageName transmis par l'événement, utilisez uni.navigateBack pour fermer. la page actuelle.

En bref, Uniapp propose différentes façons de fermer la page spécifiée. Vous pouvez choisir la méthode appropriée en fonction du scénario commercial spécifique. Personnellement, je pense que fermer la page est un moyen relativement simple et intuitif de gérer la pile de pages et de la combiner avec l'API uni.getCurrentPages. Une communication inter-pages plus flexible peut être obtenue via le bus d'événements, mais il doit être utilisé avec modération pour éviter la pollution des événements et les problèmes de performances inutiles.

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!