Comment transmettre des paramètres dans Uniapp

Avec la popularité des applications mobiles et l'évolution des besoins des utilisateurs, de plus en plus de développeurs choisissent d'utiliser Uniapp pour le développement. Cependant, un problème important qui se pose est de savoir comment transmettre les paramètres entre différentes pages. Dans cet article, nous présenterons en détail comment transmettre des paramètres dans uniapp.

1. Transmettre les paramètres via une URL

L'URL est un moyen de décrire l'emplacement d'un fichier dans un réseau informatique. Dans uniapp, les paramètres peuvent être transmis via une URL. Dans le développement Web, les paramètres peuvent être transmis via une chaîne de requête. Il existe deux façons de transmettre les paramètres d'URL dans uniapp : route jump et h5 page jump :

1 Route jump

Uniapp fournit des API liées au routage, parmi lesquelles uni.navigateTo et uni.redirectTo. en sautant. Lors du saut, les paramètres peuvent être transmis à l'URL sous forme d'objets et représentés sous forme de chaînes de requête. Comme indiqué ci-dessous :

uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=apple'
})

Dans la page en cours de saut, les paramètres transmis sont accessibles via l'objet this.$route.query. Comme indiqué ci-dessous :

export default {
  mounted() {
    console.log(this.$route.query.id) // 123
    console.log(this.$route.query.name) // 'apple'
  }
}

Il est à noter que les paramètres transmis via le saut d'itinéraire seront enregistrés dans l'historique de la barre de navigation. Par conséquent, vous pouvez revenir à la page précédente via l'opération de retour et reporter les paramètres.

Saut de page 2.h5

Dans uniapp, vous pouvez utiliser location.search pour obtenir la chaîne de requête et les paramètres dans l'URL, par exemple :

var url = window.location.search; // ?id=123&name=apple
var obj = {};
if (url.indexOf("?") != -1) {
  url = url.substr(1); // id=123&name=apple
  var arr = url.split("&");
  for(var i = 0; i < arr.length; i++) {
    var tmp = arr[i].split("=");
    obj[tmp[0]] = tmp[1];
  }
}
console.log(obj.id); // 123
console.log(obj.name); // 'apple'

Il convient de noter que lorsque vous sautez dans la page h5, vous devez Traitez manuellement l'URL.

2. Passer des paramètres via Vuex

Dans uniapp, vous pouvez utiliser Vuex pour la gestion de l'état, nous pouvons donc également transmettre des paramètres via Vuex.

1. Créer une boutique dans la page

Dans chaque page, nous devons d'abord créer une boutique pour passer les paramètres. Comme indiqué ci-dessous :

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    id: '',
    name: ''
  },
  mutations: {
    SET_ID(state, id) {
      state.id = id
    },
    SET_NAME (state, name) {
      state.name = name
    }
  }
})

export default store

Présentez le magasin dans la page comme suit :

import store from '@/store/index'

2. Passer les paramètres dans la page

Dans la page qui doit transmettre des paramètres, vous pouvez transmettre les paramètres au magasin en soumettant une mutation. Comme indiqué ci-dessous :

export default {
  methods: {
    handleClick() {
      this.$store.commit('SET_ID', '123')
      this.$store.commit('SET_NAME', 'apple')
    }
  }
}

Après avoir soumis la mutation, l'état correspondant dans le magasin est mis à jour.

3. Obtenir les paramètres dans la page

Dans la page où vous devez obtenir les paramètres, vous pouvez obtenir les paramètres stockés dans le magasin via l'objet $store.state. Comme indiqué ci-dessous :

export default {
  mounted() {
    console.log(this.$store.state.id) // 123
    console.log(this.$store.state.name) // 'apple'
  }
}

Il convient de noter que l'utilisation de Vuex pour le passage de paramètres nécessite l'introduction de Vuex et qu'un magasin doit être créé dans chaque page.

Résumé

Dans uniapp, nous pouvons transmettre des paramètres via URL et Vuex. Pour un passage simple de paramètres, nous pouvons choisir d'utiliser une URL pour transmettre des paramètres, et choisir un saut d'itinéraire ou un saut de page h5 en fonction de la situation spécifique. Pour les scénarios complexes, nous pouvons choisir d'utiliser Vuex pour le passage des paramètres, mais nous devons faire attention à la création d'un magasin dans chaque page. Quelle que soit la méthode utilisée, le choix doit être basé sur les besoins réels.

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!