Cara menghantar parameter dalam uniapp

Dengan populariti aplikasi mudah alih dan perubahan keperluan pengguna, semakin ramai pembangun memilih untuk menggunakan uniapp untuk pembangunan. Walau bagaimanapun, isu penting yang timbul ialah cara menghantar parameter antara halaman yang berbeza. Dalam artikel ini, kami akan memperkenalkan secara terperinci cara menghantar parameter dalam uniapp.

1. Melewati parameter melalui URL

URL ialah cara untuk menerangkan lokasi fail dalam rangkaian komputer. Dalam uniapp, parameter boleh dihantar melalui URL. Dalam pembangunan web, parameter boleh dihantar melalui rentetan pertanyaan. Terdapat dua cara untuk lulus parameter URL dalam uniapp: lompat laluan dan lompat halaman h5:

1 Lompat laluan

Uniapp menyediakan beberapa API berkaitan penghalaan, antaranya , kedua-dua API itu. navigateTo dan uni.redirectTo boleh membawa parameter semasa melompat. Apabila melompat, parameter boleh dihantar ke URL dalam bentuk objek dan diwakili dalam bentuk rentetan pertanyaan. Seperti yang ditunjukkan di bawah:

uni.navigateTo({
  url: '/pages/detail/detail?id=123&name=apple'
})

Dalam halaman yang dilompat, parameter yang diluluskan boleh diakses melalui objek ini.$route.query. Seperti yang ditunjukkan di bawah:

export default {
  mounted() {
    console.log(this.$route.query.id) // 123
    console.log(this.$route.query.name) // 'apple'
  }
}

Perlu diambil perhatian bahawa parameter yang dilalui melalui lompatan laluan akan disimpan dalam sejarah bar navigasi Oleh itu, anda boleh kembali ke halaman sebelumnya melalui operasi kembali dan bawa parameter.

Lompatan halaman 2.h5

Dalam uniapp, anda boleh mendapatkan rentetan pertanyaan dan parameter dalam URL melalui location.search, contohnya:

var url = window.location.search; // ?id=123&name=apple
var obj = {};
if (url.indexOf("?") != -1) {
  url = url.substr(1); // id=123&name=apple
  var arr = url.split("&");
  for(var i = 0; i < arr.length; i++) {
    var tmp = arr[i].split("=");
    obj[tmp[0]] = tmp[1];
  }
}
console.log(obj.id); // 123
console.log(obj.name); // 'apple'

Nota yang diperlukan bahawa apabila melompat dalam halaman h5, URL perlu diproses secara manual.

2. Lulus parameter melalui Vuex

Dalam uniapp, anda boleh menggunakan Vuex untuk pengurusan negeri, jadi kami juga boleh menghantar parameter melalui Vuex.

1. Buat kedai dalam halaman

Dalam setiap halaman, kita perlu membuat kedai terlebih dahulu untuk lulus parameter. Seperti yang ditunjukkan di bawah:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    id: '',
    name: ''
  },
  mutations: {
    SET_ID(state, id) {
      state.id = id
    },
    SET_NAME (state, name) {
      state.name = name
    }
  }
})

export default store

Perkenalkan kedai dalam halaman seperti berikut:

import store from '@/store/index'

2. Pass parameter dalam halaman

In In page yang perlu lulus parameter, anda boleh menghantar parameter ke kedai dengan menyerahkan mutasi. Seperti yang ditunjukkan di bawah:

export default {
  methods: {
    handleClick() {
      this.$store.commit('SET_ID', '123')
      this.$store.commit('SET_NAME', 'apple')
    }
  }
}

Selepas menyerahkan mutasi, keadaan yang sepadan dalam stor dikemas kini.

3. Dapatkan parameter dalam halaman

Dalam halaman di mana parameter perlu diperoleh, parameter yang disimpan dalam stor boleh diperoleh melalui objek $store.state. Seperti yang ditunjukkan di bawah:

export default {
  mounted() {
    console.log(this.$store.state.id) // 123
    console.log(this.$store.state.name) // 'apple'
  }
}

Perlu diambil perhatian bahawa menggunakan Vuex untuk lulus parameter memerlukan pengenalan Vuex, dan kedai perlu dibuat dalam setiap halaman.

Ringkasan

Dalam uniapp, kita boleh menghantar parameter melalui URL dan Vuex. Untuk lulus parameter mudah, kita boleh memilih untuk menggunakan URL untuk lulus parameter, dan boleh memilih lompatan penghalaan atau lompat halaman h5 mengikut situasi tertentu. Untuk senario yang rumit, kita boleh memilih untuk menggunakan Vuex untuk lulus parameter, tetapi kita perlu memberi perhatian untuk membuat kedai dalam setiap halaman. Tidak kira kaedah yang digunakan, pilihan perlu berdasarkan keperluan sebenar.

Atas ialah kandungan terperinci Cara menghantar parameter dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!