uniapp jump membawa balik data

Apabila membangunkan aplikasi mudah alih, selalunya terdapat senario di mana data perlu dihantar merentasi halaman. Pada masa ini, kami boleh menggunakan kaedah pemindahan data yang disediakan oleh rangka kerja uniapp untuk mencapai pemindahan data merentas halaman yang pantas dan mudah.

Bagaimana untuk menggunakan kaedah pemindahan data uniapp untuk melompat dan membawa balik data? Di bawah, kami akan pergi ke lebih terperinci.

1. Proses asas lompat dan pos balik

1 Dalam halaman sumber (contohnya: index.vue), kita perlu menentukan peristiwa untuk memproses data yang dikembalikan dan Ia disimpan. dalam data komponen semasa.

<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. Dalam halaman sasaran (contohnya: destination.vue), kita perlu menentukan peristiwa untuk mengembalikan data yang ingin kita hantar ke halaman sumber melalui acara tersebut.

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

Dalam contoh ini, kami mengembalikan data yang ingin kami hantar ke halaman sumber melalui kaedah uni.$emit() dan mencetuskan peristiwa acceptDataFromOpenedPage dalam fungsi panggil balik. Pada masa yang sama, kami juga memanggil kaedah uni.navigateBack() untuk kembali ke halaman sumber.

3 Akhir sekali, kendalikan operasi khusus acara acceptDataFromOpenedPage dalam halaman sumber. Dalam fungsi panggil balik acara ini, kami boleh menyimpan data yang diterima dalam data komponen semasa untuk mencapai tujuan menghantar data merentasi halaman.

2. Menghantar dan memulangkan data jenis tatasusunan

Dalam pembangunan sebenar, kita sering menghadapi senario menghantar dan memulangkan data jenis tatasusunan. Dalam uniapp, kita boleh mencapai ini melalui rentetan JSON.

Contohnya, dalam halaman sumber:

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

Dalam halaman sasaran:

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

Dalam contoh ini, kami menggunakan kaedah uni.setStorageSync() untuk menetapkan tatasusunan taip data Disimpan dalam storan tempatan sebagai rentetan JSON. Begitu juga, dalam halaman sumber, kita perlu menukar data jenis rentetan JSON kepada data jenis tatasusunan melalui kaedah JSON.parse() untuk mencapai penghantaran dan pemulangan data yang tepat.

3. Ringkasan

Melalui kaedah yang disediakan oleh rangka kerja uniapp, kami boleh mencapai tujuan pemindahan data merentas halaman dengan cepat dan mudah. Apabila menggunakannya, kita perlu menentukan elemen utama seperti acara dan fungsi panggil balik, dan mematuhi spesifikasi uniapp untuk mencapai penghantaran data yang cekap dan tepat.

Atas ialah kandungan terperinci uniapp jump membawa balik data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!