vue项目 ios 微信内置浏览器 H5页面授权后 有返回按钮问题

本文主要是介绍vue项目 ios 微信内置浏览器 H5页面授权后 有返回按钮问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

ios 微信的内置浏览器 会出现返回键 点击的时候是不触发

window.addEventListener("popstate", this.isBack, false)

这个方法的

所以下面讲下我的处理方法:

 

微信 需要授权 而授权得时候 需要跳转到 code页面 使用

location.replacenext({path: store.state.token.after_login_go,replace: true
});router.replace('/')this.$router.push({path: '',replace: true,query: {_time: new Date().getTime() // 时间戳,刷新当前router}
})

我尝试过这些方法  可是 在微信得内置浏览器里面 还是会出现 底部得返回按钮(/狗头  如果有大佬可以不出现 那可能是我当时姿势不对)

当用户点击时 会返回到 没有code得页面 或者是 一个空白的页面 (其实可能出现很多页面 不止一个)

尝试了多种网上解决方案 没有成功 最后使用的方案是

在router路由时 添加 isBack

且在路由守卫的时候添加了一个缓存

router.beforeEach((to, from, next) => {localStorage.setItem("login_go", from.name)
})

在app.vue 页面 新增isBack 方法

判断是否是在 ios 微信内置浏览器内

isBack(){var u = navigator.userAgentvar ua = window.navigator.userAgent.toLowerCase();var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)// 首次进入马上点返回if (isIOS) {if( ua.match(/micromessenger/i) == 'micromessenger' ){// 微信if (localStorage.getItem('login_go') === 'null') {wx.closeWindow()}if (this.$route.name === localStorage.getItem('login_go') || this.$route.name === null) {wx.closeWindow()}}}localStorage.setItem('login_go',this.$route.name)
}

因为测试人员会在首次进入的时候 就马上点击下方返回按钮 

所以在路由守卫的地方 首次存的 login_go 是一个字符串的 null

然用户进入了二级页面甚至更深的页面 判断 this.$route.name 是否为null 或者 是否为 login_go 所存的from.name

 

而安卓端 或者 ios企业微信 都可以用

window.addEventListener("popstate", function(e) {

去做判断

// 这个方法微信可以用  企业微信无效
WeixinJSBridge.call('closeWindow');

在企业微信 工作台 创建的应用 会出现 退出的时候 不是在聊天对话框里 而是会 回退两次 退到工作台页面 建议使用

window.history.go(-1);

 

这篇关于vue项目 ios 微信内置浏览器 H5页面授权后 有返回按钮问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1124190

相关文章

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》:本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

Redis出现中文乱码的问题及解决

《Redis出现中文乱码的问题及解决》:本文主要介绍Redis出现中文乱码的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 问题的产生2China编程. 问题的解决redihttp://www.chinasem.cns数据进制问题的解决中文乱码问题解决总结

浏览器插件cursor实现自动注册、续杯的详细过程

《浏览器插件cursor实现自动注册、续杯的详细过程》Cursor简易注册助手脚本通过自动化邮箱填写和验证码获取流程,大大简化了Cursor的注册过程,它不仅提高了注册效率,还通过友好的用户界面和详细... 目录前言功能概述使用方法安装脚本使用流程邮箱输入页面验证码页面实战演示技术实现核心功能实现1. 随机

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

全面解析MySQL索引长度限制问题与解决方案

《全面解析MySQL索引长度限制问题与解决方案》MySQL对索引长度设限是为了保持高效的数据检索性能,这个限制不是MySQL的缺陷,而是数据库设计中的权衡结果,下面我们就来看看如何解决这一问题吧... 目录引言:为什么会有索引键长度问题?一、问题根源深度解析mysql索引长度限制原理实际场景示例二、五大解决

Springboot如何正确使用AOP问题

《Springboot如何正确使用AOP问题》:本文主要介绍Springboot如何正确使用AOP问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录​一、AOP概念二、切点表达式​execution表达式案例三、AOP通知四、springboot中使用AOP导出

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅