解决微信授权成功后点击按返回键出现空白页和报错的问题


Posted in Javascript onJune 08, 2020

微信授权 的操作可以阅读我的另一篇文章 https://3water.com/article/188237.htm

微信授权我是 在index.vue做的授权,是一个空白页,因为授权需要回调所以这个页面会刷新两次,当我们授权成功进入主页面后,点击返回键或者点击手机的物理返回键,因为浏览器history机制,按物理返回或者返回肯定是会进入这个授权页面的,而此时code已经使用过,会报code错误,而且这个是空白页,多次点击也并不能回到微信的消息列表页,体验极差。。。

我的做法是引入微信的js sdk,使用vue-router 路由导航beforeEach 中的 to(即将到达的页面)和from(当前页面)来做判断,假如to是授权页,from是授权成功后首次进入的页面,在from页面点击返回 ,路由监听到这一满足条件就 调用 微信 wx.closeWindow() 方法即可关闭当前页面回到消息列表页,不是使用vue来开发的项目原理大概也是类似的。

具体代码如下:

①引入微信sdk,npm install 相对应的包即可。

解决微信授权成功后点击按返回键出现空白页和报错的问题

②在路由配置页面配置路由守卫。

解决微信授权成功后点击按返回键出现空白页和报错的问题

router.beforeEach((to, from, next) => {
  // 特殊处理授权成功后的user个人中心页面点击返回退出到微信消息列表页
  let mark = to.fullPath.indexOf('code')
  if (mark !== -1 && from.fullPath === '/user') {
    wx.closeWindow()
  }
})

因为微信授权页授权成功必会在url中带 code,所有我是通过判断路径中是否有 code认定是授权页(可能这种方式)不妥,但能确认to和from两个条件满足即可。

到此这篇关于解决微信授权成功后点击按返回键出现空白页和报错的问题的文章就介绍到这了,更多相关微信返回键出现空白页和报错内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
文本域中换行符的替换示例
Mar 04 Javascript
单击和双击事件的冲突处理示例代码
Apr 03 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
Aug 25 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
微信小程序实现签到功能
Oct 31 Javascript
深入解读Node.js中的koa源码
Jun 17 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
Jun 08 #Javascript
基于javascript处理二进制图片流过程详解
Jun 08 #Javascript
vue-router的hooks用法详解
Jun 08 #Javascript
Vue自定义render统一项目组弹框功能
Jun 07 #Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 #Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 #Javascript
vue路由权限校验功能的实现代码
Jun 07 #Javascript
You might like
php适配器模式介绍
2012/08/14 PHP
php 无法加载mcrypt.dll的解决办法
2013/04/03 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
laravel5.6 框架邮件队列database驱动简单demo示例
2020/01/26 PHP
jQuery + Flex 通过拖拽方式动态改变图片的代码
2011/08/03 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
2016/05/28 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
jQuery自定义多选下拉框效果
2017/06/19 jQuery
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
angular动态表单制作
2018/02/23 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
vue实现的多页面项目如何优化打包的步骤详解
2020/07/19 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
python 性能提升的几种方法
2016/07/15 Python
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
Python实现图像的垂直投影示例
2020/01/17 Python
Django的CVB实例详解
2020/02/10 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
2015员工年度考核评语
2015/03/25 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python
instantclient客户端 连接oracle数据库
2022/04/26 Oracle
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android