Comment uniapp affiche-t-il les paramètres passés par la page ?

Si vous développez une application mobile basée sur Uniapp, vous pouvez rencontrer des situations dans lesquelles vous devez transmettre des paramètres entre différentes pages. Dans cet article, nous présenterons comment afficher les paramètres transmis par la page dans uniapp.

Dans uniapp, nous pouvons transmettre des paramètres à la page suivante de plusieurs manières. Par exemple, vous pouvez utiliser l'API de saut de routage fournie par uniapp pour transmettre les paramètres à la page suivante. Sur la page suivante, nous pouvons obtenir les valeurs des paramètres transmises via l'objet $mp.page et lier ces valeurs de paramètres aux composants de la page pour obtenir l'effet souhaité.

Par exemple, nous pouvons passer d'une page de liste à la page de détails et passer un paramètre id. Sur la page de détails, interrogez les données associées en fonction de cette valeur d'identifiant et liez les données aux composants de la page.

Alors comment le mettre en œuvre concrètement ? Ensuite, nous le présenterons en détail sous les aspects suivants.

1. Passer les paramètres lors des sauts de routage

Nous pouvons utiliser l'API fournie par uniapp pour transmettre les paramètres à la page suivante lors des sauts de routage. Par exemple, le code suivant est un simple saut de routage, transmettant le paramètre id à la page de détails.

uni.navigateTo({
  url: '/pages/detail/detail?id=' + this.id
})

This.id voici la valeur d'identification de la page actuelle. Nous insérons cette valeur dans le paramètre de requête de l'adresse de la page de détail.

2. Obtenez la valeur du paramètre transmise par la page

Lorsque nous passons à la page de détail, nous devons obtenir la valeur du paramètre transmise à la page de détail. Ceci peut être obtenu via l'attribut options dans l'objet $mp.page. Par exemple :

onLoad(options) {
  console.log(options.id) // 打印出传递过来的id值
}

Dans la fonction onLoad, nous pouvons obtenir la valeur du paramètre id transmise via options.id et effectuer les opérations suivantes.

Notez que si nous obtenons les paramètres transmis dans la page du composant, nous devons les transmettre via this.$mp.options.

3. Lier les paramètres aux composants de la page

Après avoir obtenu les paramètres transmis, nous pouvons lier ces paramètres aux sous-composants pour obtenir le rendu des données de la page.

Dans Vue, nous pouvons lier des paramètres à l'attribut props du composant via la directive v-bind. Par exemple, le code suivant :

<template>
  <div>
    <h1>{{ content.title }}</h1>
    <p>{{ content.desc }}</p>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      content: {}  // 用于存放获取到的数据
    }
  },
  created() {
    this.getContent(this.id)
  },
  methods: {
    getContent(id) {
      // 根据id获取数据，并将数据绑定到content对象上
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons un attribut id via des accessoires et attribuons le paramètre id transmis à l'attribut id. Dans la fonction créée, nous appelons la fonction getContent pour obtenir les données de manière asynchrone et stocker les données dans l'objet de contenu.

Enfin, nous lions les données de l'objet de contenu aux balises h1 et p du composant et affichons les données une fois la page chargée.

En résumé, nous pouvons transmettre les paramètres via l'API fournie par uniapp, obtenir les valeurs des paramètres transmises via l'objet $mp.page et restituer les paramètres sur la page en liant les attributs. J'espère que cet article pourra vous aider à mieux comprendre comment afficher les paramètres transmis par la page dans uniapp.

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!