Bagaimana untuk menetapkan parameter halaman dalam uniapp

Dengan perkembangan pesat pembangunan aplikasi mudah alih, semakin ramai pembangun kini menggunakan uniapp untuk membina aplikasi merentas platform dengan cepat. Walau bagaimanapun, apabila kami membuat halaman, kadangkala kami perlu menghantar parameter ke halaman dan parameter ini mungkin dihantar dari halaman lain. Jadi, bagaimanakah uniapp menetapkan parameter halaman? Artikel ini akan memperkenalkan secara terperinci cara menetapkan parameter halaman dalam uniapp.

1. Melalui parameter melalui URL

Kami boleh menghantar parameter melalui url, yang merupakan cara yang sangat biasa. Dalam uniapp, kita boleh menggunakan lompat laluan untuk mencapai ini. Mula-mula kita boleh menetapkan parameter yang perlu dihantar dalam halaman asal:

uni.navigateTo({
  url: '/pages/target/target?id=1&name=uniapp'
})

Apabila melompat ke halaman sasaran, kita boleh membawa data melalui parameter pertanyaan url. Dalam halaman sasaran, kita boleh mendapatkan parameter dengan cara berikut:

export default {
  onLoad(options) {
    console.log(options.id) // 输出 1
    console.log(options.name) // 输出 uniapp
  }
}

Di sini kita menggunakan fungsi cangkuk kitaran hayat onLoad untuk mendapatkan parameter. Fungsi onLoad ialah fungsi cangkuk yang dicetuskan apabila halaman dimuatkan dan boleh mendapatkan parameter yang dibawa dalam url.

2. Melalui parameter melalui data global

Kami juga boleh menghantar parameter melalui data global. Dalam uniapp, kita boleh menggunakan vuex untuk mengurus data global. Kita boleh menentukan pembolehubah global dalam vuex untuk menyimpan parameter yang perlu dilalui, dan kemudian mendapatkan parameter yang sepadan dalam halaman sasaran.

Pertama, tentukan parameter yang perlu diluluskan dalam keadaan vuex:

const state = {
  userInfo: {
    id: 1,
    name: 'uniapp',
    age: 18
  }
}

Kemudian dalam halaman asal, kita boleh menetapkan parameter dengan cara berikut:

store.commit('setUserInfo', state.userInfo)

Di sini kami menggunakan fungsi komit vuex untuk mengemas kini data global. setUserInfo ialah fungsi mutasi yang digunakan untuk mengemas kini nilai userInfo.

Dalam halaman sasaran, kita boleh mendapatkan parameter dengan cara berikut:

export default {
  computed: {
    userInfo() {
      return this.$store.state.userInfo
    }
  }
}

Di sini kami menggunakan sifat yang dikira untuk mendapatkan nilai userInfo. $store ialah objek pengurusan keadaan global yang disediakan oleh vuex dan boleh digunakan secara langsung dalam mana-mana komponen.

Ringkasan

Dalam uniapp, kita boleh menghantar parameter melalui url dan data global Kedua-dua kaedah mempunyai kelebihan dan kekurangannya sendiri. Melepasi parameter melalui URL boleh menjadikan aplikasi kami lebih fleksibel, tetapi bilangan jenis parameter adalah terhad; menghantar parameter melalui data global boleh mengurangkan gandingan kod, tetapi ia akan mengambil lebih banyak ruang memori. Apabila menggunakannya, kita perlu memilih cara yang sesuai untuk lulus parameter mengikut senario aplikasi tertentu.

Di atas ialah pengenalan kepada cara menetapkan parameter halaman dalam uniapp.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan parameter halaman dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!