Comment définir les paramètres de la page dans Uniapp

Avec le développement rapide du développement d'applications mobiles, de plus en plus de développeurs utilisent désormais uniapp pour créer rapidement des applications multiplateformes. Cependant, lorsque nous créons une page, nous devons parfois transmettre des paramètres à la page, et ces paramètres peuvent être transmis depuis d'autres pages. Alors, comment uniapp définit-il les paramètres de la page ? Cet article présentera en détail comment définir les paramètres de page dans uniapp.

1. Passage de paramètres via une URL

Nous pouvons transmettre des paramètres via une URL, ce qui est un moyen très courant. Dans Uniapp, nous pouvons utiliser des sauts de routage pour y parvenir. Nous pouvons d'abord définir les paramètres qui doivent être transmis dans la page d'origine :

uni.navigateTo({
  url: '/pages/target/target?id=1&name=uniapp'
})

Lors du passage à la page cible, nous pouvons transporter des données via le paramètre de requête de l'URL. Dans la page cible, nous pouvons obtenir les paramètres des manières suivantes :

export default {
  onLoad(options) {
    console.log(options.id) // 输出 1
    console.log(options.name) // 输出 uniapp
  }
}

Ici, nous utilisons la fonction hook de cycle de vie onLoad pour obtenir les paramètres. La fonction onLoad est une fonction hook qui se déclenche lors du chargement de la page et permet d'obtenir les paramètres portés dans l'URL.

2. Transmission de paramètres via des données globales

Nous pouvons également transmettre des paramètres via des données globales. Dans uniapp, nous pouvons utiliser vuex pour gérer les données globales. Nous pouvons définir une variable globale dans vuex pour stocker les paramètres qui doivent être transmis, puis obtenir les paramètres correspondants dans la page cible.

Tout d'abord, définissez les paramètres qui doivent être passés dans l'état de vuex :

const state = {
  userInfo: {
    id: 1,
    name: 'uniapp',
    age: 18
  }
}

Ensuite, dans la page d'origine, nous pouvons définir les paramètres de la manière suivante :

store.commit('setUserInfo', state.userInfo)

Ici, nous utilisons la fonction commit de vuex pour mettre à jour données mondiales. setUserInfo est une fonction de mutation utilisée pour mettre à jour la valeur de userInfo.

Dans la page cible, nous pouvons obtenir les paramètres de la manière suivante :

export default {
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    }
  }
}

Ici, nous utilisons des propriétés calculées pour obtenir la valeur de userInfo. $store est un objet de gestion d'état global fourni par vuex et peut être utilisé directement dans n'importe quel composant.

Résumé

Dans uniapp, nous pouvons transmettre des paramètres via des URL et des données globales. Les deux méthodes ont leurs propres avantages et inconvénients. Passer des paramètres via une URL peut rendre notre application plus flexible, mais le nombre de types de paramètres est limité ; passer des paramètres via des données globales peut réduire le couplage du code, mais cela prendra plus d'espace mémoire. Lors de son utilisation, nous devons choisir la manière appropriée de transmettre les paramètres en fonction du scénario d'application spécifique.

Ce qui précède est une introduction à la façon de définir les paramètres de page dans uniapp. J'espère que cela sera utile à tout le monde.

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!