监听H5浏览器返回事件，解决监听webviewH5返回事件，触发H5给小程序传参（亲测有效）_小程序webview 后退

在浏览器中，会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。

一、 简单介绍 history 中的操作

1.window.history.back()，后退

2.window.history.forward()，前进

3.window.history.go(num)，前进或后退指定数量历史记录

4.window.history.pushState(state, title, utl)，在页面中创建一个 history 实体。直接添加到历史记录中。

参数：state：存储一个对象，可以添加相关信息，可以使用 history.state 读取其中的内容。
title：历史记录的标题。
url：创建的历史记录的链接。进行历史记录操作时会跳转到该链接。

5.window.history.replaceState()，修改当前的 history 实体。

6.popstate 事件，history 实体改变时触发的事件。

7.window.history.state，会获得 history 实体中的 state 对象。

二 监听H5浏览器返回事件，同时给小程序传递参数

要求：在H5页面为进行操作时，返回小程序，触发弹框显示

问题：在小程序的成功回调方法中触发打开H5页面（通过webview方式），如果在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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在项目中使用

H5页面代码：

1、安装微信sdk

npm install weixin-js-sdk –save
1

2、在页面引入微信sdk

import wx from 'weixin-js-sdk'
1

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

小程序中代码：

1、在webview页面接收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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

2、在跳转webview页面前的页面watch监听参数变化，触发弹框显示

<!-- 请输入密码 -->
		<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>
1
2
3
4
5
6
7
8
9
10

watch: {
	'passwordValue': {
		handler(newVal) {
			if (newVal == 0) {
				this.passwordsubmitIshow = true;
			} else if (newVal == 1) {
				this.passwordsubmitIshow = false;
			}
		},
		deep: true
	},
},
1
2
3
4
5
6
7
8
9
10
11
12

实现效果

在H5页面为进行操作或未完成操作时，返回小程序，触发弹框显示

三 在指定页面监听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 } })
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29