Passer des paramètres sur différentes pages d'uniapp

Avec la popularité de l'Internet mobile, le développement d'applications mobiles attire de plus en plus d'attention. En tant que l'un des frameworks de développement multiplateformes les plus populaires, Uniapp est largement utilisé dans le développement d'applications mobiles. Dans le développement d'Uniapp, comment transférer des paramètres entre différentes pages est un problème très courant. Cet article présentera comment transférer des paramètres entre différentes pages dans Uniapp sous plusieurs aspects.

1. Passage des paramètres de requête

Dans Uniapp, vous pouvez transmettre des paramètres via le paramètre de requête de la page. Par exemple, nous pouvons accéder à la page de détails en cliquant sur le bouton de la page d'accueil et transmettre l'ID du produit à la page de détails. Le code est implémenté comme suit :

// Code de saut sur la page d'accueil
uni.navigateTo. ({
url : '/pages/detail/detail?id=' + this.goodsId
});

// Obtenir le code dans la page de détails
onLoad(options) {
this.goodsId = options.id;
}

Dans la page d'accueil, nous passons à la page de détails via la méthode uni.navigateTo et transmettons l'identifiant du produit à la page de détails via le paramètre de requête. Dans la page de détails, nous obtenons l'ID de produit transmis via le paramètre options de la méthode onLoad et l'attribuons à la variable GoodsId correspondant à la page de détails.

2. Transfert de paramètres Vuex

Dans Uniapp, vous pouvez utiliser Vuex pour transférer des paramètres entre différentes pages. Vuex est une bibliothèque de gestion d'état spécialement conçue pour le framework Vue.js, qui peut réaliser le partage d'état entre différents composants. Dans Uniapp, vous pouvez définir une variable globale dans Vuex et introduire Vuex dans les pages qui doivent transmettre des paramètres, réalisant ainsi le transfert de paramètres entre les pages.

Par exemple, nous pouvons définir une variable globale goodId dans l'état Vuex, modifier la valeur de la variable sur la page d'accueil et obtenir la valeur de la variable dans la page de détails. Le code est implémenté comme suit :

//. Défini dans l'état Vuex Variable globale goodId
state : {
goodsId : ''
}

// Changer la valeur de cette variable sur la page d'accueil
methods : {
jumpToDetail() {

this.$store.state.goodsId = '123456';
uni.navigateTo({
  url: '/pages/detail/detail'
});

}
}

// Récupérez-le sur la page de détails La valeur de cette variable
calculée : {
goodsId() {

return this.$store.state.goodsId;

}
}

Dans la page d'accueil, nous attribuons une valeur à la variable globale goodId via this.$store.state .goodsId et accédez-y via la page Détails de la méthode uni.navigateTo. Dans la page de détails, nous obtenons la variable GoodsId dans Vuex via l'attribut calculé pour obtenir la valeur transmise.

3. Transfert de paramètres du bus d'événements

Dans Uniapp, nous pouvons également utiliser le bus d'événements pour transférer des paramètres entre différentes pages. Le bus d'événements est un modèle de conception qui permet à différents composants de communiquer et de transmettre des paramètres en écoutant des événements et en déclenchant des événements. Dans Uniapp, vous pouvez utiliser les méthodes uni.$emit et uni.$on pour surveiller et déclencher des événements.

Par exemple, nous pouvons déclencher un événement via la méthode uni.$emit sur la page d'accueil et écouter l'événement via la méthode uni.$on sur la page de détails, réalisant ainsi le transfert des paramètres. Le code est implémenté comme. suit :

// Utilisé sur la page d'accueil uni.$emit déclenche des événements
méthodes : {
jumpToDetail() {

uni.$emit('goodsId', '123456');
uni.navigateTo({
  url: '/pages/detail/detail'
});

}
}

// Utilisez uni.$on pour écouter les événements dans la page de détails
onLoad () {
uni.$on('goodsId' , (goodsId) => {

this.goodsId = goodsId;

});
}

Dans la page d'accueil, nous déclenchons l'événement nommé 'goodsId' via la méthode uni.$emit et transmettez l'identifiant du produit '123456' en tant que paramètre. Dans la page de détails, nous écoutons l'événement nommé « goodsId » via la méthode uni.$on dans la méthode onLoad et attribuons l'identifiant de produit transmis à la variable GoodsId correspondant à la page de détails.

En résumé, le transfert de paramètres entre différentes pages d'Uniapp peut être réalisé via le transfert de paramètres de requête, le transfert de paramètres Vuex et le transfert de paramètres de bus d'événements. Les développeurs peuvent choisir la méthode appropriée pour transmettre les paramètres en fonction des besoins réels afin de mieux répondre aux exigences fonctionnelles de l'application.

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!