uniapp ジャンプでデータが戻る

モバイル アプリケーションを開発する場合、ページ間でデータを渡す必要があるシナリオがよくあります。現時点では、uniapp フレームワークによって提供されるデータ転送方法を使用して、高速で便利なクロスページ データ転送を実現できます。

uniapp のデータ転送メソッドを使用してデータをジャンプして戻すにはどうすればよいですか?以下、さらに詳しく見ていきます。

1. ジャンプとポストバックの基本プロセス

1. ソース ページ (例:index.vue) で、返されたデータを処理するイベントを定義する必要があります。現在のコンポーネントのデータ内。

<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. ターゲット ページ (例: destination.vue) で、イベントを通じてソース ページに渡したいデータを返すイベントを定義する必要があります。

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

この例では、uni.$emit() メソッドを通じてソース ページに渡したいデータを返し、コールバック関数で acceptDataFromOpenedPage イベントをトリガーします。同時に、uni.navigateBack() メソッドを呼び出してソース ページに戻ります。

3. 最後に、ソース ページで acceptDataFromOpenedPage イベントの特定の操作を処理します。このイベントのコールバック関数では、ページ間でデータを渡すという目的を達成するために、受信したデータを現在のコンポーネントのデータに保存できます。

2. 配列型データの受け渡しと返却

実際の開発では、配列型データの受け渡しと返却を行う場面によく遭遇します。 uniapp では、JSON 文字列を通じてこれを実現できます。

たとえば、ソース ページ内:

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

ターゲット ページ内:

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

この例では、uni.setStorageSync() メソッドを使用して配列を設定します。データ型 JSON 文字列としてローカル ストレージに保存されます。同様に、ソース ページでは、データの正確な送信と返しを実現するために、JSON.parse() メソッドを通じて JSON 文字列型データを配列型データに変換する必要があります。

3. 概要

uniapp フレームワークによって提供されるメソッドを通じて、ページ間でデータを転送するという目的を迅速かつ簡単に達成できます。利用する際には、効率的かつ正確なデータ送信を実現するために、イベントやコールバック関数などの主要な要素を定義し、uniappの仕様に準拠する必要があります。

以上がuniapp ジャンプでデータが戻るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。