В браузере будет необходимо нажимать кнопки «назад», «назад», «предыдущая страница» и другие, чтобы реализовать необходимость закрытия страницы, настройки на указанную страницу, подтверждения выхода со страницы или выполнения некоторых других операций. Вы можете использовать событие popstate для отслеживания операций возврата, возврата и предыдущей страницы.
1. Кратко представить операции в истории
1.window.history.back(), назад
2.window.history.forward(), вперед
3.window.history.go(num), перемотка вперед или назад на указанное количество исторических записей
4.window.history.pushState(состояние, заголовок, utl), создать объект истории на странице. Добавлено прямо в историю.
Параметры: состояние: хранить объект, вы можете добавить соответствующую информацию, вы можете использовать history.state для чтения содержимого.
title: Название записи истории.
url: Ссылка на созданную историю. Вы будете перенаправлены на эту ссылку при выполнении операций с историей.
5.window.history.replaceState(), изменить текущий объект истории.
6. событие popstate, событие, срабатывающее при изменении объекта истории.
7.window.history.state, получит объект состояния в объекте истории.
2. Прослушайте событие возврата браузера H5 и одновременно передайте параметры апплету.
Требования: если вы не работаете на странице H5, вернитесь к апплету и вызовите отображение всплывающего окна.
Проблема: в успешном методе обратного вызова апплета вызовите открытие страницы H5 (через веб-просмотр), если вы нажмете физическую кнопку возврата в верхнем левом углу страницы H5, вы вернетесь в апплет, и вы не иметь возможность снова вызвать переход на страницу H5
Решение:
1. Следите за физической кнопкой возврата на странице H5
2. Передайте параметры в апплет при возврате
3. Получите параметры в апплете, судите по параметрам, поднимите всплывающее окно, чтобы предложить перейти снова
Отмените действие возврата по умолчанию:
1.添加一条 history 实体作为替代原来的 history 实体
function pushHistory(){
var state = {
title: "title",
url: "#"
}
window.history.pushState(state, "title", "#");
}
pushHistory()
2.监听 popstate 事件
window.addEventListener("popstate", function(){
//doSomething
}, false)
используется в проекте
Код страницы H5:
1. Установите WeChat SDK
npm install weixin-js-sdk –save
2. Вставьте WeChat SDK на страницу
import wx from 'weixin-js-sdk'
3. Страница H5 отслеживает, возвращает и передает параметры в апплет.
mounted () {
const that = this
// 监听返回
this.pushHistory()
window.addEventListener('popstate', function (e) {
// 为了避免只调用一次
that.pushHistory('title1')
// 自定义方法, 直接关闭网页或返回小程序上一页
that.goBack()
},
false
)
},
methods:{
// 添加一条 history 实体作为替代原来的 history 实体
pushHistory (str = 'title', url = '#') {
const state = {
title: str,
url
}
window.history.pushState(state, state.title, state.url)
},
goBack () {
wx.miniProgram.navigateBack()
// postMessage给小程序传递参数，只有当小程序页面退出和当前页面销毁的情况下才会触发传参
wx.miniProgram.postMessage({
data: {
passWord: this.passwordValue } })
},
}
Код в апплете:
1. Получить параметр страницы H5 на странице веб-просмотра и передать параметр на предыдущую страницу апплета через стек страниц.
<template>
<view>
<web-view :src="url" @message="handleMessage"></web-view>
</view>
</template>
<script>
import apiUrl from '@/utils/commonUrl.js';
export default {
data() {
return {
url: '',
};
},
onLoad(option) {
this.url = apiUrl.videoUrl + "?t=" + new Date().getTime() + '&message=' + option.message
},
methods:{
handleMessage(res){
let pages = getCurrentPages(); //获取所有页面栈实例列表
let nowPage = pages[pages.length - 1]; //当前页页面实例
let prevPage = pages[pages.length - 2]; //上一页页面实例
prevPage.$vm.passwordValue = res.detail.data[res.detail.data.length - 1].passWord; //修改上一页data里面的参数值
},
}
}
</script>
<style lang="scss">
</style>
2. Прежде чем перейти на страницу веб-просмотра, просмотр страницы отслеживает изменения параметров и запускает отображение всплывающего окна.
<!-- 请输入密码 -->
<view class="success-box" v-if="passwordsubmitIshow">
<view class="contain-top">
温馨提示
</view>
<view class="success-text1">
请前往重置密码
</view>
<button class="bottom-submit" @click="passwordConfirm">确认</button>
</view>
watch: {
'passwordValue': {
handler(newVal) {
if (newVal == 0) {
this.passwordsubmitIshow = true;
} else if (newVal == 1) {
this.passwordsubmitIshow = false;
}
},
deep: true
},
},
добиться эффекта
Когда страница H5 не работает или операция не завершена, вернитесь в апплет и вызовите отображение всплывающего окна.
3. Прослушайте событие возврата браузера H5 на указанной странице, очистите событие прослушивания, когда страница будет уничтожена, и одновременно передайте параметры апплету.
Когда в H5 есть только одна страница, описанный выше метод можно использовать как обычно, но когда в H5 много страниц, вам нужно добавить возвращаемое событие прослушивания и возвращаемое событие отмены прослушивания на указанной странице.
Пример: код в проекте H5
mounted () {
// 监听返回
this.pushHistory()
if (this.personList.token != '') {
window.addEventListener('popstate', this.goBack, false)
}
},
// 页面销毁时，清除返回监听事件
beforeDestroy () {
window.removeEventListener('popstate', this.goBack, false)
},
methods: {
// 插入浏览器历史
pushHistory (str = 'title', url = '#/detail') {
const state = {
title: str,
url
}
window.history.pushState(state, state.title, state.url)
},
goBack () {
// 为了避免只调用一次
this.pushHistory('title1')
// 自定义方法, 当页面路由为指定页面时，执行监听的方法
if (window.location.href == 'https://cbstest.ncbmip.com/minip/rongshu/index.html#/detail') {
wx.miniProgram.navigateBack()
wx.miniProgram.postMessage({
data: {
passWord: this.passwordValue } })
}
},