关于监听微信浏览器返回按钮事件处理安卓IOS通用

简介: 关于监听微信浏览器返回按钮事件处理安卓IOS通用

新的发布可看https://root181.blog.csdn.net/article/details/119523317

1.效果

image.gif

效果说明:

  1. 做了个dialog组件,打开编辑联系人,可以通过物理返回键关闭这个dialog,这里原本物理返回是会返回上一页的
  2. 返回上一页,即退出报名页,这里监听了物理返回,确定才正式返回上一页
  3. 以上功能在安卓和ios上测试都通过


代码

methods

windowListener() {
      let that = this;
      if(this.userEditType == 1 && this.addPersonFlag && this.isShowUserEdit){//点击返回的时候,满足联系人dialog开启了的条件的就关闭dialog,阻止返回上一页
        this.isShowUserEdit = false;
        this.addPersonFlag = false;
        that.pushHistory();
        return
      }
      if (this.addPersonFlag && !this.isShowUserEdit) {//根据条件关闭dialog,阻止返回上一页
        this.addPersonFlag = false;
        that.pushHistory();
        return;
      }
      if (this.addPersonFlag && this.isShowUserEdit) {//根据条件关闭dialog,阻止返回上一页
        this.isShowUserEdit = false;
        this.addPersonFlag = true;
        that.pushHistory();
        return;
      }
      if (!this.addPersonFlag && !this.isShowUserEdit) {//dialog都关闭的,点了返回,看用户是否真的要返回
        weui.confirm("确定要取消报名吗?", {
          title: "提示",
          buttons: [
            {
              label: "取消",
              type: "default",
              onClick: function() {//不返回,就阻止原生返回
                that.pushHistory();
              }
            },
            {
              label: "确定",
              type: "primary",
              onClick: function() {//返回就返回到指定页面,注:推荐上一页是有规律的情况下使用,如果不是固定的,就用session记录pushHistory()执行的次数,返回到pushHistory()执行的次数的前一页才是正确的上一页这里就不多做解释
                that.$router.replace({//跳转
                  path: `/app/act/${that.$route.query.iid}/detail_test/${
                    that.$route.query.actId
                  }?saleR=${
                    that.$route.query.saleR ? that.$route.query.saleR : ""
                  }&disrParentMultiDisKey=${
                    that.$route.query.disrParentMultiDisKey
                      ? that.$route.query.disrParentMultiDisKey
                      : ""
                  }`
                });
              }
            }
          ],
          isAndroid: false
        });
      }
    },
    pushHistory() {//阻止返回上一页的方法,原理就是在历史记录里插上一条当前的页面
      let state = {
        title: "",
        url: window.location.href
      };
      window.history.pushState(state, state.title, state.url);
    },

mounted

this.pushHistory();
window.addEventListener("popstate", this.windowListener, false);//监听物理返回键

销毁监听

beforeDestroy() {
   window.removeEventListener("popstate", this.windowListener);
 },


相关文章
|
21天前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
3天前
|
JavaScript 前端开发 iOS开发
ios样式开关按钮jQuery插件
ios样式开关按钮jQuery插件
25 7
|
12天前
|
Java 开发工具 Android开发
安卓与iOS开发环境对比分析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自占据半壁江山。本文深入探讨了这两个平台的开发环境,从编程语言、开发工具到用户界面设计等多个角度进行比较。通过实际案例分析和代码示例,我们旨在为开发者提供一个清晰的指南,帮助他们根据项目需求和个人偏好做出明智的选择。无论你是初涉移动开发领域的新手,还是寻求跨平台解决方案的资深开发者,这篇文章都将为你提供宝贵的信息和启示。
24 8
|
8天前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
|
12天前
|
Java 调度 Android开发
安卓与iOS开发中的线程管理差异解析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自拥有独特的魅力。如同东西方文化的差异,它们在处理多线程任务时也展现出不同的哲学。本文将带你穿梭于这两个平台之间,比较它们在线程管理上的核心理念、实现方式及性能考量,助你成为跨平台的编程高手。
|
19天前
|
开发框架 Dart Android开发
安卓与iOS的跨平台开发:Flutter框架深度解析
在移动应用开发的海洋中,Flutter作为一艘灵活的帆船,正引领着开发者们驶向跨平台开发的新纪元。本文将揭开Flutter神秘的面纱,从其架构到核心特性,再到实际应用案例,我们将一同探索这个由谷歌打造的开源UI工具包如何让安卓与iOS应用开发变得更加高效而统一。你将看到,借助Flutter,打造精美、高性能的应用不再是难题,而是变成了一场创造性的旅程。
|
开发工具 iOS开发
|
API 开发工具 开发者