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


目录
相关文章
|
8天前
|
存储 消息中间件 人工智能
【03】AI辅助编程完整的安卓二次商业实战-本地构建运行并且调试-二次开发改注册登陆按钮颜色以及整体资源结构熟悉-优雅草伊凡
【03】AI辅助编程完整的安卓二次商业实战-本地构建运行并且调试-二次开发改注册登陆按钮颜色以及整体资源结构熟悉-优雅草伊凡
35 3
|
8天前
|
存储 消息中间件 人工智能
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
37 11
【05】AI辅助编程完整的安卓二次商业实战-消息页面媒体对象(Media Object)布局实战调整-按钮样式调整实践-优雅草伊凡
|
2月前
|
XML Java Android开发
微信虚拟视频插件安卓,微信虚拟相机替换拍照,java源码分享
完整的相机应用项目包含三个主要文件:主活动实现、布局文件和清单文件。代码实现了相机预览、
|
26天前
|
安全 数据挖掘 Android开发
Cellebrite UFED 4PC 7.72 (Windows) - Android 和 iOS 移动设备取证软件
Cellebrite UFED 4PC 7.72 (Windows) - Android 和 iOS 移动设备取证软件
97 2
Cellebrite UFED 4PC 7.72 (Windows) - Android 和 iOS 移动设备取证软件
|
7月前
|
JavaScript 前端开发 Android开发
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
216 13
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
2月前
|
Android开发 数据安全/隐私保护
手机微信虚拟视频聊天,安卓免root虚拟摄像头,免root虚拟hook相机
以上代码实现了一个完整的免root虚拟摄像头方案,通过Hook系统摄像头服务和微信视频通话接口
|
2月前
|
API Android开发
微信虚拟摄像头模块,微信虚拟视频聊天,安卓虚拟摄像头插件
该实现包含虚拟摄像头服务核心、视频流生成和Android配置三个关键模块,使用Camera2
|
6月前
|
安全 算法 小程序
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
377 28
【03】微信支付商户申请下户到配置完整流程-微信开放平台创建APP应用-填写上传基础资料-生成安卓证书-获取Apk签名-申请+配置完整流程-优雅草卓伊凡
|
7月前
|
安全 Android开发 数据安全/隐私保护
Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
293 12
Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件

热门文章

最新文章