Uniapp Jump ramène des données

Lors du développement d'applications mobiles, il existe souvent des scénarios dans lesquels les données doivent être transmises entre les pages. À l'heure actuelle, nous pouvons utiliser la méthode de transfert de données fournie par le framework uniapp pour réaliser un transfert de données entre pages rapide et pratique.

Comment utiliser la méthode de transfert de données d'uniapp pour sauter et ramener des données ? Ci-dessous, nous entrerons plus en détail.

1. Processus de base de saut et de publication

1 Dans la page source (par exemple : index.vue), nous devons définir un événement pour gérer le retour. data et enregistrez-le dans les données du composant actuel.

<template>
  <view>
    <button @click="toDestination">前往目标页面</button>
  </view>
</template>
<script>
  export default {
    methods: {
      toDestination() {
        uni.navigateTo({
          url: '/pages/destination/destination',
          events: {
            acceptDataFromOpenedPage: function(data) {
              console.log('源页面接收到的数据：' + JSON.stringify(data));
              // 在这里可以将接收到的数据保存到当前组件的data中
              // 比如：this.setData({receivedData: data})
            }
          }
        })
      }
    }
  }
</script>

2. Dans la page cible (par exemple : destination.vue), nous devons définir un événement pour renvoyer les données que nous voulons transmettre à la page source via l'événement.

<template>
  <view>
    <button @click="backToSource">回到源页面</button>
  </view>
</template>
<script>
  export default {
    methods: {
      backToSource() {
        var data = {
          name: '小明',
          age: 18,
          gender: '男'
        };
        uni.$emit('acceptDataFromOpenedPage', data);
        uni.navigateBack();
      }
    }
  }
</script>

Dans cet exemple, nous renvoyons les données que nous voulons transmettre à la page source via la méthode uni.$emit() et déclenchons l'événement acceptDataFromOpenedPage dans la fonction de rappel. En parallèle, nous appelons également la méthode uni.navigateBack() pour revenir à la page source.

3. Enfin, gérez les opérations spécifiques de l'événement acceptDataFromOpenedPage dans la page source. Dans la fonction de rappel de cet événement, nous pouvons enregistrer les données reçues dans les données du composant actuel pour atteindre l'objectif de transmission de données entre les pages.

2. Transmission et renvoi de données de type tableau

Dans le développement réel, nous rencontrons souvent des scénarios de transmission et de renvoi de données de type tableau. Dans uniapp, nous pouvons y parvenir via une chaîne JSON.

Par exemple, dans la page source :

<template>
  <view>
    <button @click="toDestination">前往目标页面</button>
  </view>
</template>
<script>
  export default {
    methods: {
      toDestination() {
        uni.navigateTo({
          url: '/pages/destination/destination',
          events: {
            acceptDataFromOpenedPage: function(data) {
              console.log('源页面接收到的数据：' + JSON.stringify(data));
              // 在这里可以将接收到的数据保存到当前组件的data中
              // 比如：this.setData({receivedData: data})
            }
          }
        })
      }
    }
  }
</script>

Dans la page cible :

<template>
  <view>
    <button @click="backToSource">回到源页面</button>
  </view>
</template>
<script>
  export default {
    methods: {
      backToSource() {
        var dataArr = [
          {name: '小明', age: 18, gender: '男'},
          {name: '小红', age: 20, gender: '女'},
          {name: '小李', age: 22, gender: '男'}
        ];
        uni.setStorageSync('dataArr', JSON.stringify(dataArr));
        uni.navigateBack();
      }
    }
  }
</script>

Dans cet exemple, on passe uni.setStorageSync() La méthode stocke les données de type tableau dans le stockage local et les stocke sous forme de chaîne JSON. De même, dans la page source, nous devons convertir les données de type chaîne JSON en données de type tableau via la méthode JSON.parse() pour obtenir une transmission et un retour précis des données.

3. Résumé

Grâce aux méthodes fournies par le framework uniapp, nous pouvons atteindre rapidement et facilement l'objectif de transfert de données entre les pages. Lors de son utilisation, nous devons définir les principaux éléments tels que les événements et les fonctions de rappel, et nous conformer aux spécifications d'uniapp pour obtenir une transmission de données efficace et précise.

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!