При разработке общедоступных учетных записей WeChat иногда необходимо перехватить и обработать логику страницы, связанную с кнопкой возврата в верхнем левом углу браузера, вместо того, чтобы позволить странице напрямую вернуться на предыдущую страницу. Эта деталь не была предусмотрена. раньше реализовано очень хорошо. Однако я увидел, что результаты на официальном аккаунте JD Shopping были очень хорошими, поэтому начал пробовать это сам. Эффект от JD.com заключается в следующем:
Судя по эффекту покупок Jingdong на рисунке выше, нажатие на поиск вызывает интерфейс поиска, а затем нажатие на верхний левый угол для возврата. Интерфейс поиска просто закрывается, но страница не возвращается, как при повторном чтении индикатора выполнения. , и моей странице нужен именно этот эффект. Давайте воспользуемся vue, чтобы продемонстрировать этот процесс.
Предпосылка: кнопку возврата в верхнем левом углу WeChat нельзя перехватить, но событие возврата можно отслеживать.
Идея: если вы хотите действительно перехватить событие возврата, вы можете сначала добавить запись в window.history на текущей странице (на самом деле просто добавьте запись pushState в стек истории, браузер фактически не будет загружать этот путь), когда вы щелкните, чтобы вернуться, прослушайте событие возврата и обработайте логику, которую вы хотите обработать. В любом случае, WeChat должен выполнить возврат. Только что добавленная запись будет удалена из window.history, и этот путь заменит текущий путь к странице. Примечание. Это всего лишь замена пути. Он просто меняет имя пути и фактически не загружает путь.
Реализация: в демо-версии создаются две страницы vue (первая и две), и первая страница переходит на вторую. Затем на второй странице всплывает слой маски. При нажатии на верхний левый угол для возврата он не возвращается на первую, но сначала исчезает слой маски. При повторном нажатии вы возвращаетесь на предыдущую страницу;
Эффект следующий:
Связанное объяснение кода:1 Добавьте к смонтированному методу второй страницы и метод для прослушивания возвращаемого события. При нажатии кнопки возврата всплывающая маска скрывается;
mount() { let that = this; // Добавляем прослушиватель возвращаемого события window.addEventListener(popstate, function(e) { that.isShowTestDiv = false; }, false);2. Контролируйте маскирующий слой и добавляйте запись в window.history (стек истории), когда он отображается;
watch: { isShowTestDiv: function(newVal, oldVal) { if (newVal === true) { this.pushHistory(); } } } pushHistory() { // Изменить историю var state = { title: , url: /two / / Этот URL-адрес можно заполнить случайно, просто для того, чтобы URL-адрес, отображаемый браузером, не изменился, и это не повлияет на страницу}; },3. Если пользователь щелкает соответствующую операцию на маскированном слое, чтобы закрыть маскированный слой, он или она должен вручную удалить добавленную им запись из истории и вернуть маршрут в Vue.
helloClick() { // Нажмите на всплывающую маску приветствия this.isShowTestDiv = false; this.$router.back() // Удаляем добавленную запись из истории}демо-адрес
gitHub: https://github.com/LiJinShi/wechat_back_vue
Подвести итогВышеупомянутая функция блокировки кнопки «Назад» в верхнем левом углу браузера WeChat, представленная редактором. Надеюсь, она будет вам полезна. Если у вас есть какие-либо вопросы, оставьте мне сообщение, и редактор ответит вам. время. Я также хотел бы поблагодарить всех за поддержку сайта боевых искусств VeVb!