微信页面关闭事件

预计阅读时间: 2 分钟

场景需求：

在微信浏览器中，监听页面关闭事件，当页面关闭时，处理一些事件。这是平时工作中比较常遇到的问题。与此同时，还有微信页面的刷新问题，切后台问题等等。现就目前的需求，对前一段时间遇到的问题以及最终的解决办法，做一下记录。

业务需求：
- 微信浏览器页面关闭，暂停播放，停止记录时长；
- 微信浏览器页面切后台时，同上，暂停播放，停止记录时长；
- 后台杀死微信浏览器时，同上。
此中涉及到的事件主要有：
1. 微信浏览器页面关闭事件：pagehide / unload 事件
2. 页面的后台前台切换事件（即页面的显示与隐藏）：visibilitychange 事件

微信（APP 客户端）页面关闭

微信端对 Android 和 iOS 的处理方式有所差异，有些事件监听函数只能在 Android 和 iOS 中的一端生效，所以微信页关闭事件也是如此，不同操作系统平台，所需的事件监听方法还是有差异的。

Android 微信页面关闭

Android 微信关闭

1const unloadHander(e) {
2	// 获取浏览器信息ua
3	let u = navigator.userAgent;
4	// 判断设备
5	let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
6	if (isAndroid) {
7		// 处理事件
8	}
9}
10
11// 添加事件
12window.addEventListener('unload', function(e) {
13	unloadHander();
14}, false);
15
16// 移除事件
17window.removeEventListener('unload', function(e) {
18	unloadHander();
19}, false);

iOS 微信页面关闭

iOS 微信页面关闭

1const pagehideHander(e) {
2	// 获取浏览器信息ua
3	let u = navigator.userAgent;
4	// 判断设备
5	let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
6	if (isiOS) {
7		// 处理事件
8	}
9}
10
11// 添加事件
12window.addEventListener('pagehide', function(e) {
13	pagehideHander();
14}, false);
15
16// 移除事件
17window.removeEventListener('pagehide', function(e) {
18	pagehideHander();
19}, false);

目录