Fungsi intersepsi tombol kembali browser WeChat di sudut kiri atas

Dalam pengembangan akun publik WeChat, terkadang perlu untuk mencegat dan memproses logika halaman yang terkait dengan tombol kembali di sudut kiri atas browser, alih-alih membiarkan halaman tersebut langsung kembali ke halaman sebelumnya diimplementasikan dengan sangat baik sebelumnya. Namun saya melihat hasil di akun resmi JD Shopping sangat bagus, jadi saya mulai mencobanya sendiri. Efek JD.com adalah sebagai berikut:

Dilihat dari efek belanja Jingdong pada gambar di atas, mengklik pencarian menampilkan antarmuka pencarian, lalu mengklik sudut kiri atas untuk kembali, itu hanya menutup antarmuka pencarian, tetapi halaman tidak kembali seperti membaca bilah kemajuan lagi , dan halaman saya memerlukan efek ini. Mari gunakan vue untuk membuat demo dari proses ini.

Premis: Tombol kembali di sudut kiri atas WeChat tidak dapat dicegat, tetapi acara pengembalian dapat dipantau.

Ide: Jika Anda ingin benar-benar mencegat peristiwa pengembalian, Anda dapat terlebih dahulu menambahkan catatan ke window.history di halaman saat ini (sebenarnya cukup tambahkan catatan pushState ke tumpukan riwayat, browser tidak akan benar-benar memuat jalur ini), ketika Anda klik untuk kembali, dengarkan acara pengembalian dan proses logika yang ingin Anda proses. Bagaimanapun, WeChat harus menjalankan pengembalian. Catatan yang baru saja ditambahkan akan dikeluarkan dari window.history dan jalur ini akan menggantikan jalur halaman saat ini. Catatan: Ini hanyalah pengganti jalur. Ini hanya mengubah nama jalur dan tidak benar-benar memuat jalur tersebut.

Implementasi: Dua halaman vue (pertama dan kedua) dibuat di demo, dan halaman pertama melompat ke halaman kedua. Kemudian lapisan topeng muncul di halaman kedua. Ketika Anda mengklik di sudut kiri atas untuk kembali, itu tidak kembali ke yang pertama, tetapi lapisan topeng menghilang terlebih dahulu. Ketika Anda mengklik kembali, Anda kembali ke halaman sebelumnya;

Efeknya adalah sebagai berikut:

1 Tambahkan ke metode terpasang di halaman kedua dan tambahkan metode untuk mendengarkan acara pengembalian. Ketika tombol kembali diklik, topeng pop-up disembunyikan;

 mount() { biarkan itu = ini; // Tambahkan return event pendengar window.addEventListener(popstate, function(e) { that.isShowTestDiv = false; }, false },

2. Pantau lapisan masking dan tambahkan catatan ke window.history (tumpukan riwayat) saat ditampilkan;

 tonton: { isShowTestDiv: function(newVal, oldVal) { if (newVal === true) { this.pushHistory(); } } } pushHistory() { // Ubah riwayat var state = { title: , url: /two / / URL ini dapat diisi dengan santai, hanya untuk mencegah perubahan alamat URL yang ditampilkan oleh browser, dan tidak berpengaruh pada halaman}; },

3. Jika pengguna mengklik operasi yang relevan pada lapisan bertopeng untuk menutup lapisan bertopeng, dia harus secara manual menghapus catatan yang dia tambahkan dari riwayat dan mengembalikan rute ke Vue.

 helloClick() { // Klik pada pop-up hello mask this.isShowTestDiv = false; this.$router.back(); // Hapus catatan yang ditambahkan dari riwayat}

alamat demo

gitHub:https://github.com/LiJinShi/wechat_back_vue

Di atas adalah fungsi pemblokiran tombol kembali di sudut kiri atas browser WeChat yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!