Uniapp Jump bringt Daten zurück

Bei der Entwicklung mobiler Anwendungen kommt es häufig vor, dass Daten seitenübergreifend übertragen werden müssen. Zu diesem Zeitpunkt können wir die vom Uniapp-Framework bereitgestellte Datenübertragungsmethode verwenden, um eine schnelle und bequeme seitenübergreifende Datenübertragung zu erreichen.

Wie verwende ich die Datenübertragungsmethode von Uniapp, um Daten zu springen und zurückzubringen? Im Folgenden gehen wir näher darauf ein.

1. Grundlegender Prozess von Sprung und Postback

1 Auf der Quellseite (zum Beispiel: index.vue) müssen wir ein Ereignis definieren, um die zurückgegebenen Daten zu verarbeiten und in den Daten der aktuellen Komponente zu speichern.

<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. Auf der Zielseite (zum Beispiel: destination.vue) müssen wir ein Ereignis definieren, um die Daten zurückzugeben, die wir über dieses Ereignis an die Quellseite übergeben möchten.

<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>

In diesem Beispiel geben wir die Daten, die wir an die Quellseite übergeben möchten, über die Methode uni.$emit() zurück und lösen das Ereignis „acceptDataFromOpenedPage“ in der Rückruffunktion aus. Gleichzeitig rufen wir auch die Methode uni.navigateBack() auf, um zur Quellseite zurückzukehren.

3. Behandeln Sie abschließend die spezifischen Vorgänge des AcceptDataFromOpenedPage-Ereignisses auf der Quellseite. In der Rückruffunktion dieses Ereignisses können wir die empfangenen Daten in den Daten der aktuellen Komponente speichern, um den Zweck der seitenübergreifenden Datenweitergabe zu erreichen.

2. Übergeben und Zurückgeben von Array-Typ-Daten

In der tatsächlichen Entwicklung stoßen wir häufig auf Szenarien, in denen Array-Typ-Daten übergeben und zurückgegeben werden. In uniapp können wir dies durch einen JSON-String erreichen.

Zum Beispiel auf der Quellseite:

<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>

Auf der Zielseite:

<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>

In diesem Beispiel speichern wir die Array-Typdaten über die Methode uni.setStorageSync() im lokalen Speicher und verwenden sie als gespeicherte JSON-Zeichenfolge im Formular. In ähnlicher Weise müssen wir auf der Quellseite JSON-String-Typ-Daten über die JSON.parse()-Methode in Array-Typ-Daten konvertieren, um eine genaue Übertragung und Rückgabe der Daten zu erreichen.

3. Zusammenfassung

Durch die vom Uniapp-Framework bereitgestellten Methoden können wir den Zweck der seitenübergreifenden Datenübertragung schnell und einfach erreichen. Bei der Verwendung müssen wir die Hauptelemente wie Ereignisse und Rückruffunktionen definieren und die Spezifikationen von Uniapp einhalten, um eine effiziente und genaue Datenübertragung zu erreichen.

Das obige ist der detaillierte Inhalt vonUniapp Jump bringt Daten zurück. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!