Bagaimana untuk menutup halaman dalam uniapp

Uniapp ialah rangka kerja pembangunan merentas platform yang membolehkan pembangun menulis aplikasi untuk iOS, Android, H5 dan platform lain pada masa yang sama, meningkatkan kecekapan pembangunan dan menjimatkan kos pembangunan. Dalam proses membangunkan aplikasi Uniapp, selalunya perlu melaksanakan fungsi menutup halaman tertentu Artikel ini akan memperkenalkan cara menutup halaman tertentu dalam Uniapp.

1. Tutup halaman melalui pengurusan tindanan halaman

Dalam aplikasi Uniapp, lompatan halaman dilaksanakan melalui pengurusan tindanan halaman. Tindanan halaman ialah struktur data yang digunakan untuk menyimpan hubungan lompatan antara halaman Setiap kali anda melompat ke halaman baharu, halaman akan ditambahkan ke bahagian atas tindanan halaman Apabila anda kembali dari halaman atau menutup halaman akan muncul dari timbunan halaman. Oleh itu, fungsi menutup halaman yang ditentukan boleh direalisasikan dengan mengendalikan tindanan halaman.

Uniapp menyediakan berbilang API untuk mengurus tindanan halaman, yang paling biasa digunakan ialah uni.navigateBack dan uni.reLaunch. uni.navigateBack digunakan untuk menutup halaman semasa dan kembali ke halaman sebelumnya, dan uni.reLaunch digunakan untuk menutup semua halaman dan melompat ke halaman tertentu aplikasi. Walau bagaimanapun, kedua-dua API ini tidak menyokong penutupan terus halaman yang ditentukan. Oleh itu, adalah perlu untuk menggabungkan API uni.getCurrentPages untuk mendapatkan maklumat tindanan halaman untuk merealisasikan fungsi menutup halaman yang ditentukan.

uni.getCurrentPages digunakan untuk mendapatkan maklumat susunan halaman semasa dan mengembalikan tatasusunan yang mengandungi semua objek halaman Elemen terakhir tatasusunan ialah objek halaman semasa. Dengan menggelung melalui objek halaman dalam tatasusunan ini, cari indeks objek halaman yang perlu ditutup dan gunakan uni.navigateBack atau uni.reLauch untuk menutup halaman.

Berikut ialah kod sampel:

function closePage(pageName) {
  const pages = getCurrentPages();
  const len = pages.length;
  for (let i = 0; i < len; i++) {
    const page = pages[i];
    if (page.route === pageName) {
      const delta = len - i - 1;
      uni.navigateBack({
        delta: delta,
      });
      break;
    }
  }
}

Kod sampel ini mentakrifkan fungsi closePage, yang menerima nama halaman yang perlu ditutup, pageName, sebagai parameter. Mula-mula, dapatkan maklumat tindanan halaman semasa melalui uni.getCurrentPages, kemudian rentas tatasusunan objek halaman, cari objek halaman yang atribut laluannya sama dengan pageName, hitung berapa tahap halaman yang perlu dikembalikan dan akhirnya gunakan uni.navigateBack ke tutup halaman sasaran.

2. Tutup halaman melalui bas acara

Bas acara ialah model yang digunakan secara meluas dalam pembangunan bahagian hadapan untuk mencapai komunikasi antara komponen. Dalam Uniapp, bas acara juga boleh digunakan untuk melaksanakan komunikasi antara halaman, termasuk fungsi menutup halaman tertentu.

Untuk melaksanakan bas acara, anda perlu menggunakan mekanisme responsif vue.js Dengan mencipta contoh vue global sebagai bas acara, komponen atau halaman lain boleh mencetus dan memantau masing-masing melalui $emit dan $. pada kaedah kejadian. Parameter boleh diluluskan apabila mencetuskan acara, dan acara mendengar akan menerima parameter yang dibawa oleh acara dan boleh mengendalikannya dengan sewajarnya.

Berikut ialah kod sampel:

// event-bus.js
import Vue from 'vue';
export default new Vue();

// Page1.vue
import eventBus from '@/event-bus';
export default {
  methods: {
    onClosePage() {
      eventBus.$emit('closePage', 'Page2');
    },
  },
}

// Page2.vue
import eventBus from '@/event-bus';
export default {
  created() {
    eventBus.$on('closePage', (pageName) => {
      if (this.$options.name === pageName) {
        uni.navigateBack();
      }
    });
  },
}

Dalam kod sampel ini, tika eventBus mula-mula dibuat untuk berfungsi sebagai bas acara. Kemudian dalam halaman Halaman1, apabila halaman Halaman2 perlu ditutup, eventBus.$emit digunakan untuk mencetuskan acara Nama acara ialah 'closePage' dan nama halaman yang perlu ditutup diluluskan. Dalam halaman Halaman2, dengar acara 'closePage' dan dapatkan nama komponen halaman semasa melalui ini.$options.name Apabila nama itu sama dengan halaman nama halamanName yang diluluskan oleh acara, gunakan uni.navigateBack untuk menutup halaman semasa.

Ringkasnya, Uniapp menyediakan pelbagai cara untuk menutup halaman yang ditentukan Anda boleh memilih kaedah yang sesuai mengikut senario perniagaan tertentu. Secara peribadi, saya fikir menutup halaman adalah cara yang agak mudah dan intuitif melalui pengurusan tindanan halaman dan menggabungkan dengan API uni.getCurrentPages. Komunikasi yang lebih fleksibel antara halaman boleh dicapai melalui bas acara, tetapi ia perlu digunakan secara sederhana untuk mengelakkan pencemaran acara dan masalah prestasi yang tidak perlu.

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