关于监听微信浏览器返回按钮事件处理安卓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);
 },


相关文章
|
2月前
|
搜索推荐 Android开发 iOS开发
安卓与iOS系统的用户界面设计对比分析
本文通过对安卓和iOS两大操作系统的用户界面设计进行对比分析,探讨它们在设计理念、交互方式、视觉风格等方面的差异及各自特点,旨在帮助读者更好地理解和评估不同系统的用户体验。
27 1
|
2月前
|
API 开发工具 Android开发
iOS 和 Android 平台的开发有哪些主要区别?
iOS与Android开发区别:iOS用Objective-C/Swift,App Store唯一下载渠道;Android用Java/Kotlin,多商店发布(如Google Play、华为市场)。设计上,iOS简洁一致,Android灵活可定制。开发工具,iOS用Xcode,Android用Android Studio。硬件和系统多样性,iOS统一,Android复杂。权限管理、审核流程及API各有特点,开发者需依据目标平台特性进行选择。
30 3
|
3天前
|
人工智能 安全 Android开发
【专栏】探索未来:Android 与 iOS 在人工智能时代的融合与创新
【4月更文挑战第27天】在人工智能时代,Android和iOS两大移动操作系统巨头正加速融合与创新。Android以其开放性占据广阔市场,集成AI功能如语音助手;而iOS以其稳定性和生态优势,如Siri,提供卓越体验。两者在AI技术、应用场景上相互借鉴,拓展至医疗、教育等领域,并逐步打通生态系统。然而,技术竞争、数据隐私和标准不一是挑战,新市场需求、技术创新和产业合作则带来机遇。未来,二者将继续推动AI发展,为社会进步贡献力量。
|
1天前
|
缓存 Android开发 iOS开发
打造高效移动应用:Android与iOS性能优化策略
【4月更文挑战第29天】 在移动设备日益成为用户日常互动的主要平台的今天,应用程序的性能已成为决定其成功的关键因素之一。本文将探讨针对Android和iOS平台的性能优化技巧,涵盖内存管理、多线程处理、网络请求优化以及用户界面的流畅性提升等方面。通过分析不同操作系统的架构特点,我们旨在提供一套综合性的策略,帮助开发者构建快速、响应迅捷且用户体验良好的应用。
|
2月前
|
搜索推荐 Android开发 iOS开发
安卓与iOS操作系统的发展与比较
在移动互联网时代,安卓和iOS两大操作系统在智能手机市场竞争激烈。本文将从技术架构、生态系统、用户体验等方面对安卓和iOS进行比较分析,探讨它们各自的特点和发展趋势。
|
2月前
|
小程序
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
|
2月前
|
JSON 小程序 JavaScript
【微信小程序】-- 页面事件 - 上拉触底(二十六)
【微信小程序】-- 页面事件 - 上拉触底(二十六)
|
2月前
|
JSON 小程序 JavaScript
【微信小程序】-- 页面事件 - 下拉刷新(二十五)
【微信小程序】-- 页面事件 - 下拉刷新(二十五)
|
2月前
|
Web App开发 前端开发 网络安全
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
【2月更文挑战第21天】前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
58 1
前端分析工具之 Charles 录制 Android/IOS 手机的 https 应用
|
2月前
|
JavaScript 前端开发
js阻止浏览器默认事件和防止事件传播事件
js阻止浏览器默认事件和防止事件传播事件
21 3