微信公众号开发之返回按钮事件监听

本文介绍如何在微信内置浏览器中使用JavaScript控制JSP页面的返回行为,避免默认返回机制导致用户体验不佳的问题,并通过监听popstate事件实现指定页面跳转。

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

1.微信公众号交互页面嵌入了JSP页面,微信内置的浏览器左上角有返回按钮,而安卓版没有,在实际项目中,有页面跳转A-->B-->C,C页面做完处理点击返回直接跳到A页面的需求,默认的返回是不可以的,处理逻辑如下:

$(function(){
    pushHistory(); 
    window.addEventListener("popstate", function(e) {  //回调函数中实现需要的功能
	// alert("我监听到了浏览器的返回按钮事件啦");
	window.location.href='/wechart/contractList?userId=${userId}&openId=';  //在这里指定其返回的地址
    }, false);
});
function pushHistory() {
    var state = {
        title: "我的合同",
        url: "#"
    };
    window.history.pushState(state, state.title, state.url);

}

2.为了避免C页面跳回A页面后,再点击返回又回到C页面,我们可以再在A页面中监听下返回按钮,如果点击返回就关闭页面

$(function(){
    pushHistory(); 
    window.addEventListener("popstate", function(e) {  //回调函数中实现需要的功能
	// alert("我监听到了浏览器的返回按钮事件啦");
	WeixinJSBridge.call('closeWindow');
    }, false);
});
function pushHistory() { 
        var state = { 
            title: "我的合同", 
            url: "#"
        }; 
        window.history.pushState(state, state.title, state.url); 
    }


在Vue 2中处理微信公众号右下角的返回按钮不会触发`beforeCreate`生命周期钩子的问题,可以通过以下几种方法来解决: 1. **使用路由守卫**: Vue Router 提供了导航守卫,可以用来拦截导航操作。在`beforeEach`钩子中处理返回逻辑。 ```javascript const router = new VueRouter({ routes: [ // 你的路由配置 ] }) router.beforeEach((to, from, next) => { // 在这里处理返回逻辑 if (to.path === '/your-path') { // 处理返回逻辑 } next() }) new Vue({ router, render: h => h(App), }).$mount('#app') ``` 2. **使用`popstate`事件**: `popstate`事件浏览器历史记录发生变化时触发,可以用来处理返回按钮的逻辑。 ```javascript window.addEventListener('popstate', function(event) { // 在这里处理返回逻辑 if (event.state) { // 处理返回逻辑 } }); ``` 3. **使用`beforeDestroy`或`beforeUnmount`生命周期钩子**: 在组件销毁前处理返回逻辑。 ```javascript export default { name: 'YourComponent', beforeDestroy() { // 在这里处理返回逻辑 }, beforeUnmount() { // 在这里处理返回逻辑 } } ``` 4. **使用自定义事件**: 可以在返回按钮点击时触发自定义事件,然后在组件中监听事件。 ```javascript // 在返回按钮点击时触发事件 document.getElementById('back-button').addEventListener('click', function() { window.dispatchEvent(new Event('backButtonClicked')); }); // 在组件中监听事件 export default { name: 'YourComponent', mounted() { window.addEventListener('backButtonClicked', this.handleBackButton); }, beforeDestroy() { window.removeEventListener('backButtonClicked', this.handleBackButton); }, methods: { handleBackButton() { // 处理返回逻辑 } } } ``` 通过这些方法,你可以确保在微信公众号中处理返回按钮的逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值