Mari kita bincangkan tentang cara Uniapp memanggil halaman lain

Dengan perkembangan pesat aplikasi mudah alih, kami semakin menggunakan H5 untuk membangunkan aplikasi merentas platform. Sebagai rangka kerja popular untuk pembangunan merentas platform hadapan, Uniapp digemari oleh semakin ramai pembangun kerana fungsinya yang berkuasa dan ciri yang mudah digunakan. Dalam pembangunan Uniapp, kita sering perlu memanggil kaedah pada halaman lain untuk melaksanakan beberapa fungsi. Artikel ini akan memperkenalkan cara Uniapp memanggil halaman lain.

1. Memanggil melalui vuex

vuex ialah alat untuk mengurus data dalam Uniapp. Ia menyimpan data dalam keadaan global dan boleh dipanggil dalam mana-mana komponen. Kami boleh membuat panggilan kaedah pada halaman lain melalui vuex. Berikut ialah contoh mudah:

// store.js
const store = new Vuex.Store({
  state: {
    someData: 'Hello World'
  },
  mutations: {
    changeData(state, newData) {
      state.someData = newData
    }
  }
})

Dalam komponen yang perlu memanggil kaedah ini, kita boleh menggunakan kaedah this.$store.commit() untuk memanggil:

// otherComponent.vue
export default {
  methods: {
    changeData(newData) {
      this.$store.commit('changeData', newData)
    }
  }
}

2. $ Memanggil

dalam mod emit sebenarnya mempunyai kaedah komunikasi komponen yang baik dalam Vue: penghantaran acara, dan Uniapp juga menyokong kaedah ini. Kita boleh menggunakan kaedah uni.$emit() untuk mencetuskan peristiwa tersuai dalam satu komponen dan menggunakan $on() untuk mendengar acara dan melaksanakan operasi yang sepadan dalam komponen lain.

Dalam komponen sumber:

// sourceComponent.vue
export default {
  methods: {
    emitEvent(data) {
      uni.$emit('eventName', data)
    }
  }
}

Dalam komponen sasaran:

// targetComponent.vue
export default {
  created() {
    uni.$on('eventName', this.handleEvent)
  },
  methods: {
    handleEvent(data) {
      console.log(data)
    }
  }
}

Dengan cara ini, kita boleh memanggil Kaedah komponen lain untuk mencapai fungsi rentas komponen interaksi.

3. Panggil melalui uni.navigateTo

Dalam proses pembangunan sebenar, kita selalunya perlu melompat dari satu halaman ke halaman lain dan melakukan operasi tertentu di halaman lain. Kita boleh menggunakan kaedah uni.navigateTo untuk melompat ke halaman dan melakukan operasi yang sepadan dalam halaman sasaran.

Dalam halaman sumber:

// sourcePage.vue
export default {
  methods: {
    navigateToTarget() {
      uni.navigateTo({
        url: '/pages/targetPage/targetPage',
        success() {
          console.log('跳转成功')
        }
      })
    }
  }
}

Dalam halaman sasaran, kita boleh menggunakan fungsi onLoad() untuk melaksanakan operasi yang sepadan apabila halaman dimuatkan:

// targetPage.vue
export default {
  onLoad(options) {
    console.log(options)
  }
}

4 . Memanggil melalui bas acara uni-app

Aplikasi Uni menyediakan fungsi bas acara, yang boleh digunakan untuk mencapai komunikasi antara pelbagai halaman. Kaedah penggunaannya sangat mudah Kami boleh mengimport uni pada mana-mana halaman dan menggunakan fungsi publish-subscribe.

Dalam halaman sumber, kami menggunakan $emit untuk mencetuskan acara tersuai:

// sourcePage.vue
export default {
  methods: {
    emitEvent(data) {
      uni.$emit('eventName', data)
    }
  }
}

Dalam halaman sasaran, kami boleh menggunakan $on untuk mendengar acara dan melakukan tindakan yang sepadan :

// targetPage.vue
export default {
  created() {
    uni.$on('eventName', this.handleEvent)
  },
  methods: {
    handleEvent(data) {
      console.log(data)
    }
  }
}

Ringkasan

Apabila membangunkan Uniapp, kita selalunya perlu memanggil kaedah pada halaman lain untuk melaksanakan beberapa fungsi. Melalui Vuex, penghantaran acara, lonjakan halaman dan bas acara Uni-app, kami boleh melaksanakan kaedah panggilan merentas halaman untuk memudahkan pembangunan dan meningkatkan kebolehskalaan aplikasi.

Atas ialah kandungan terperinci Mari kita bincangkan tentang cara Uniapp memanggil halaman lain. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!