微信平台页面手机返回键监听事件_关闭当前页面

最新推荐文章于 2024-06-24 14:37:41 发布

原创最新推荐文章于 2024-06-24 14:37:41 发布 · 1.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在网页中加载微信API的JS文件，实现微信分享功能，并提供了监听浏览器历史状态变化，调用微信JSBridge关闭当前窗口的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.加载微信api js

<script type="text/javascript" src="${ctx}/js/jweixin-1.2.0.js"></script>

2.监听+关闭方法

<script>
		window.history.pushState(null, null, "#");
		window.addEventListener('popstate', function(e) {
			WeixinJSBridge.call('closeWindow');
		}, false);
	</script>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

菜鸟柱子

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信页面关闭事件

落下香樟树

10-22

2953

微信l浏览器页面关闭事件需求：在微信浏览器中，监听页面关闭事件，当页面关闭时，处理一些事件。这是平时工作中比较常遇到的问题。与此同时，还有微信页面的刷新问题，切后台问题等等。现就目前的需求，对前一段时间遇到的问题以及最终的解决办法，做一下记录。业务需求：微信浏览器页面关闭，暂停播放，停止记录时长；微信浏览器页面切后台时，同上，暂停播放，停止记录时长；后台杀死微信浏览器时，同上。此中涉及到的事件主要有：微信浏览器页面关闭事件：pagehide / unload 事件页面的后台前台切

微信小程序监听手机系统自带的左右滑动返回事件

早晚的博客

06-27

3537

微信小程序返回的时候想直接返回首页，但是左滑是上一页，和navigateBack一样，所以就监听了一下，后来一想在页面卸载的时候也可以，还可以使用getCurrentPages（）方法，拿到是一个数组，需要添加更多的逻辑来处理边界情况（如多点触摸、滑动距离的判断阈值等）。同时，由于触摸事件的频繁触发，可能还需要考虑性能优化和防抖/节流等技术。大致监听然后返回首页的。有好的建议可以留言。还有一种办法就是直接在卸载页面onunload里面直接写跳转页面的方法.

参与评论您还未登录，请先登录后发表或查看评论

Android仿微信客户端+监听fragment返回键

07-21

1、仿微信客户端UI 2、监听fragment返回键 3、双击退出

js监听微信浏览器返回按钮事件，关闭微信窗口

hylcyz的专栏

03-07

6814

前端时间做微信抢红包h5开发的时候，跳转了几个页面，但在最终体现页面在点击返回的时候虚妄直接关闭微信窗口，而不是返回上一级页面，找了很多资料总结如下： // 监听微信返回 window.addEventListener("popstate", function(e) { alert('正在返回，等下会关闭微信窗口'); WeixinJSBridge.call('clo...

页面关闭时触发事件

weixin_30768661的博客

12-18

504

页面关闭时触发事件 Posted on 2007-07-09 11:40 yiki 阅读(1542) 评论(3) 编辑收藏网摘所属分类: JScript <scriptlanguage="javascript">window.onbeforeunload=function(){if(!(event.clientX>documen...

js监听返回事件，返回直接关闭窗口事件（微信网页返回关闭）

weixin_34004750的博客

12-22

411

$(function(){ pushHistory(); window.addEventListener("popstate", function(e) { //alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 //alert('guanbi'); WeixinJSBridge.cal...

微信浏览器左上角返回按钮监听的实现

10-15

主要介绍了微信浏览器左上角返回按钮监听的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue 弹窗时监听手机返回键关闭弹窗功能(页面不跳转)

10-17

需要注意的是，这种利用`popstate`事件来实现手机返回键监听的方法只适用于浏览器环境。对于像微信小程序这类不使用标准浏览器行为的应用来说，需要另外的解决方案。总结来说，要实现在Vue应用中监听手机返回键...

微信小程序webview中监听返回按钮

weixin_49258413的博客

06-24

2918

小程序监听webview页面左上角返回按钮

监听浏览器页面关闭事件(visibilitychange和unload)

C05230的博客

09-22

8716

监听浏览器的页面关闭事件

vue实现微信浏览器左上角返回按钮拦截功能

11-21

【需求】　　在微信公众号开发中，有时需要对浏览器左上角返回按钮进行拦截处理相关的页面逻辑，而并不是让页面直接返回上一页，之前在这个细节点上的一直实现得不是很好。但看到京东购物公众号上的效果却实现得非常好，所以自己也开始了这方面的尝试。京东的效果如下图：从上图京东购物效果上来看，在点击搜索拉起一个搜索界面，然后点击左上角反回，只是将搜索界面收起，而页面没有重新像读取进度条一样去返回，而我页面需要的正是这样的效果，下面就用vue来做一个这个过程的 demo 吧。【前提】　　微信左上角的返回按钮其实无法被拦截，但是可以监听到这个返回事件。【思路】　　要想真正拦截返回事件，可以当前页面先

jquery监听页面关闭

hantanxin的专栏

11-28

8006

1.不能阻止关闭事件 JQuery获取页面关闭事件 $(window).unload(function(){ //响应事件 alert("获取到了页面要关闭的事件了！"); }); 2.可以根据选择按钮，阻止关闭或刷新事件 $(window).bind('beforeunload', function () { debugger; ...

监听微信返回事件

成长笔记

03-04

4225

//监听微信返回事件 pushHistory(); window.addEventListener("popstate", function(e) { $('.return-ans').show();//要做的处理 }, false); function pushHistory() { var state = { title: "title", ur...

IOS 通知栏点击跳转指定页面

xiangff_csdn的博客

11-11

6403

通过rootView跳转和实例化VC //如果程序没有运行，点击通知栏推送消息跳转到指定页面。 if (launchOptions) { NSUserDefaults *pushJudge = [NSUserDefaults standardUserDefaults]; [pushJudge setObject:@"push" for

移动端检测微信浏览器返回，关闭，进入后台操作

高先生的猫

06-16

1149

最近做一个倒计时记录学习时长项目，需要在用户点击浏览器的返回按钮或者直接关闭浏览器，或者直接退出微信或者进入后台时记录下当前页面的进度，下次进去从上次退出的地方开始倒计时。一开始想的很简单直接监测浏览器的返回事件window.onbeforeunload，在安卓和pc上可以监测到，但是iOS上监测不到解决办法：根据百度相关文档，发现iOS端检测需要用pagehide去检测，于是修改代码如下 var u = navigator.userAgent; var isAndroid = u.ind.

【webview】微信和PC监听浏览器关闭和刷新(亲测可用)

热爱技术，享受生活

09-13

3686

最近做的项目里有一个新的需求，在不同的浏览器内打开的网页，监听用户的操作，比如关闭浏览器，刷新浏览器等等。这就涉及到了几个平台：PC端浏览器，移动端IOS和安卓微信的webview等等。在微信里打开的H5网页，要获取到用户关闭页面的事件。经过对visibilitychange、 unload/pagehide 、onunload、popstate各种方法一阵测试，发现安卓里能监听到关闭事件。而iOS里使用pagehide能监听。

JS监听微信浏览器返回事件

jiangxinyu50的博客

04-24

5881

监听popstate事件，这个对应着微信浏览器左上方后退按钮。（用得最多） // 添加退后事件 window.addEventListener('popstate', () => { ...... // do something ......for example // location.href = window.location.href; ...

微信H5如何关闭浏览器（如何监听手机的物理返回键）

harry_zhaoning的博客

02-18

8125

微信h5页面，监控手机物理返回键，关闭微信浏览器

微信小程序页面自带返回键

最新发布

03-27

<think>好的，我需要帮用户解决在微信小程序中实现页面返回键功能的问题。首先，用户提到他们想了解如何让页面自带返回键，但根据引用中的信息，微信小程序本身没有提供直接的API来监听返回操作，比如onBackPress这样的方法。不过，根据引用[4]，当使用wx.navigateTo跳转页面时，小程序会自动在左上角添加返回按钮，这可能是一个默认行为，用户可能没有注意到这点。接下来，用户提到他们在处理返回键时遇到了循环跳转的问题。引用[2]中的情况显示，用户在onshow中跳转到空白页，导致返回时反复触发跳转。这说明需要避免在生命周期函数中无条件跳转，可能需要条件判断来控制跳转逻辑。然后，引用[3]和[4]提到了使用wx.navigateBack和navigator组件来实现返回功能。可能用户需要的是自定义返回按钮的行为，而不是依赖系统自带的返回键。例如，使用navigator组件或者按钮绑定事件来触发返回操作。另外，引用[1]指出小程序没有直接拦截返回操作的方法，但可以通过页面栈管理来处理。例如，检查当前页面栈的层数，如果超过一定层数，则使用wx.navigateBack返回，否则跳转到指定页面。这可能适用于需要控制返回路径的情况。综合以上信息，我应该分步骤说明如何实现返回键功能。首先，利用系统自动生成的返回键，即使用wx.navigateTo跳转时自动出现的返回按钮。其次，如果需要自定义返回按钮，可以在页面中添加一个按钮，并绑定wx.navigateBack方法。同时，需要注意页面栈的管理，避免循环跳转的问题，比如在跳转前检查页面栈的深度，或者在onshow中添加条件判断，确保跳转只发生在特定情况下。可能还需要提到如何处理物理返回键和右滑手势的问题，但由于小程序本身不支持监听这些事件，可能需要通过页面栈管理和条件跳转来间接控制。例如，在onUnload或onHide生命周期中处理状态，或者在跳转时使用redirect方法替换当前页面，避免页面栈过多导致的问题。最后，需要提醒用户注意页面栈的限制，最多十层，过多的跳转可能导致无法正确返回。因此，合理使用wx.redirectTo或wx.reLaunch来管理页面栈，确保用户体验流畅，避免循环跳转的情况发生。</think>### 微信小程序实现页面返回键功能的方法 #### 一、系统默认返回键 1. **通过`wx.navigateTo`实现** 使用`wx.navigateTo`跳转页面时，小程序会自动在新页面左上角生成返回按钮，用户点击可返回上一页。 ```javascript wx.navigateTo({ url: '/pages/targetPage/targetPage' }) ``` 此方法适用于非`tabBar`页面跳转[^4]。 2. **通过`<navigator>`组件实现** 在`wxml`中添加导航组件，用户点击后可返回上一页： ```html <navigator url="/pages/previousPage/previousPage">返回上一页</navigator> ``` #### 二、自定义返回逻辑 1. **监听物理返回键与手势** - **问题场景**：若在`onShow`中无条件跳转页面（如引用[2]），会导致返回时陷入循环。 - **解决方案**：添加条件判断，仅在满足特定条件时执行跳转： ```javascript Page({ onShow() { if (/* 需要跳转的条件 */) { wx.navigateTo({ url: '/pages/h5Page/h5Page' }) } } }) ``` 2. **使用`wx.navigateBack`控制返回路径** 通过`delta`参数指定返回层级，例如返回上两页： ```javascript wx.navigateBack({ delta: 2 }) ``` 3. **强制关闭当前页面** 使用`wx.redirectTo`或`wx.reLaunch`替换当前页面，避免页面栈堆积： ```javascript wx.redirectTo({ url: '/pages/newPage/newPage' }) ``` #### 三、特殊场景处理 1. **隐藏默认返回键** 若需隐藏系统返回键，可在页面配置中设置`navigationStyle: "custom"`（需在`app.json`或页面`json`中声明）[^4]。 2. **底部导航栏冲突** 当跳转页面含`tabBar`时，使用`wx.switchTab`跳转，但需注意此方法会清空页面栈[^3]。 --- ###