При разработке мини-программ WeChat мы часто сталкиваемся с необходимостью отслеживать нажатия в верхнем левом углу для возврата, физические клавиши возврата на телефоне или свайпы влево для возврата. WeChat изначально не имеет API для поддержки мониторинга. На данный момент мы можем использовать следующие два метода для выполнения этой операции.
Если для параметра NavigationStyle конфигурации страницы установлено значение custom, вы можете использовать этот компонент для замены встроенной панели навигации.
"navigationStyle": "custom",
Если вам нужна глобальная замена, вы можете настроить ее непосредственно в app.js. Для одностраничного использования вы можете использовать ее в соответствующем xxx.js. Используя пользовательскую навигацию, мы можем реализовать различные потребности, щелкая стрелку в верхнем левом углу для возврата. Но этот метод может отслеживать только отдачу в левом верхнем углу и не может добиться желаемого эффекта. Прикреплено: https://github.com/lingxiaoyi/navigation-bar. Выше представлен компонент навигации, используемый в моем проекте. Конкретные методы использования см. во введении к компоненту.
Этот метод может отслеживать три операции возврата и должен быть решен с помощью встроенного H5. Как встроить H5 в мини-программу WeChat
<web-view src="{{url}}"></web-view>
Примечание. Вам необходимо заранее настроить доменное имя h5 на имя бизнес-домена в фоновом режиме мини-программы.
Затем в H5 нам нужно использовать метод pushState для чтения и записи истории браузера с помощью метода window.history. pushState недавно добавлен в API H5. В файлах HTML метод History.pushState() добавляет состояние в историю браузера. pushState() принимает три параметра: объект состояния, заголовок и собственный URL-адрес. Загрузите код напрямую
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
window.history.pushState(null, null, "#");
window.addEventListener("popstate", function(e) {
window.history.pushState(null, null, "#");
alert('Меня перехватили')
})
</script>
<body>
<p>Тестирование возврата физических ключей</p>
</body>
</html>