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

相关文章

Springboot项目构建时各种依赖详细介绍与依赖关系说明详解

《Springboot项目构建时各种依赖详细介绍与依赖关系说明详解》SpringBoot通过spring-boot-dependencies统一依赖版本管理,spring-boot-starter-w... 目录一、spring-boot-dependencies1.简介2. 内容概览3.核心内容结构4.

MySQ中出现幻读问题的解决过程

《MySQ中出现幻读问题的解决过程》文章解析MySQLInnoDB通过MVCC与间隙锁机制在可重复读隔离级别下解决幻读,确保事务一致性,同时指出性能影响及乐观锁等替代方案,帮助开发者优化数据库应用... 目录一、幻读的准确定义与核心特征幻读 vs 不可重复读二、mysql隔离级别深度解析各隔离级别的实现差异

C++ vector越界问题的完整解决方案

《C++vector越界问题的完整解决方案》在C++开发中,std::vector作为最常用的动态数组容器,其便捷性与性能优势使其成为处理可变长度数据的首选,然而,数组越界访问始终是威胁程序稳定性的... 目录引言一、vector越界的底层原理与危害1.1 越界访问的本质原因1.2 越界访问的实际危害二、基

Python多线程应用中的卡死问题优化方案指南

《Python多线程应用中的卡死问题优化方案指南》在利用Python语言开发某查询软件时,遇到了点击搜索按钮后软件卡死的问题,本文将简单分析一下出现的原因以及对应的优化方案,希望对大家有所帮助... 目录问题描述优化方案1. 网络请求优化2. 多线程架构优化3. 全局异常处理4. 配置管理优化优化效果1.

Nginx添加内置模块过程

《Nginx添加内置模块过程》文章指导如何检查并添加Nginx的with-http_gzip_static模块:确认该模块未默认安装后,需下载同版本源码重新编译,备份替换原有二进制文件,最后重启服务验... 目录1、查看Nginx已编辑的模块2、Nginx官网查看内置模块3、停止Nginx服务4、Nginx

在ASP.NET项目中如何使用C#生成二维码

《在ASP.NET项目中如何使用C#生成二维码》二维码(QRCode)已广泛应用于网址分享,支付链接等场景,本文将以ASP.NET为示例,演示如何实现输入文本/URL,生成二维码,在线显示与下载的完整... 目录创建前端页面(Index.cshtml)后端二维码生成逻辑(Index.cshtml.cs)总结

Linux部署中的文件大小写问题的解决方案

《Linux部署中的文件大小写问题的解决方案》在本地开发环境(Windows/macOS)一切正常,但部署到Linux服务器后出现模块加载错误,核心原因是Linux文件系统严格区分大小写,所以本文给大... 目录问题背景解决方案配置要求问题背景在本地开发环境(Windows/MACOS)一切正常,但部署到

MySQL磁盘空间不足问题解决

《MySQL磁盘空间不足问题解决》本文介绍查看空间使用情况的方式,以及各种空间问题的原因和解决方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧... 目录查看空间使用情况Binlog日志文件占用过多表上的索引太多导致空间不足大字段导致空间不足表空间碎片太多导致空间不足临时表空间

Mybatis-Plus 3.5.12 分页拦截器消失的问题及快速解决方法

《Mybatis-Plus3.5.12分页拦截器消失的问题及快速解决方法》作为Java开发者,我们都爱用Mybatis-Plus简化CRUD操作,尤其是它的分页功能,几行代码就能搞定复杂的分页查询... 目录一、问题场景:分页拦截器突然 “失踪”二、问题根源:依赖拆分惹的祸三、解决办法:添加扩展依赖四、分页

Spring Boot项目如何使用外部application.yml配置文件启动JAR包

《SpringBoot项目如何使用外部application.yml配置文件启动JAR包》文章介绍了SpringBoot项目通过指定外部application.yml配置文件启动JAR包的方法,包括... 目录Spring Boot项目中使用外部application.yml配置文件启动JAR包一、基本原理