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


目录
相关文章
|
5月前
|
XML Java Android开发
微信虚拟视频插件安卓,微信虚拟相机替换拍照,java源码分享
完整的相机应用项目包含三个主要文件:主活动实现、布局文件和清单文件。代码实现了相机预览、
|
10月前
|
JavaScript 前端开发 Android开发
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
349 13
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
5月前
|
Android开发 数据安全/隐私保护
手机微信虚拟视频聊天,安卓免root虚拟摄像头,免root虚拟hook相机
以上代码实现了一个完整的免root虚拟摄像头方案,通过Hook系统摄像头服务和微信视频通话接口
|
5月前
|
API Android开发
微信虚拟摄像头模块,微信虚拟视频聊天,安卓虚拟摄像头插件
该实现包含虚拟摄像头服务核心、视频流生成和Android配置三个关键模块,使用Camera2
|
9月前
|
安全 算法 小程序
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
564 28
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
|
10月前
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
400 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
10月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
431 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
10月前
|
缓存 Java 测试技术
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
1212 3
【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
|
10月前
|
小程序
微信小程序数据绑定与事件处理:打造动态交互体验
在上一篇中,我们学习了搭建微信小程序开发环境并创建“Hello World”页面。本文深入探讨数据绑定和事件处理机制,通过具体案例帮助你打造更具交互性的小程序。数据绑定使用双花括号`{{}}`语法,实现页面与逻辑层数据的动态关联;事件处理则通过`bind`或`catch`前缀响应用户操作。最后,通过一个简单的计数器案例,巩固所学知识。掌握这些核心技能,将助你开发更复杂的小程序。