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


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 相关文章推荐
JS返回上一页实例代码通过图片和按钮分别实现
Aug 16 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
javascript的理解及经典案例分析
May 20 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
vue 对axios get pust put delete封装的实例代码
Jan 05 Javascript
JS原生实现轮播图的几种方法
Mar 23 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
关于BIG5-HKSCS的解决方法
2007/03/20 PHP
用PHP实现维护文件代码
2007/06/14 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
PHP微信红包API接口
2015/12/05 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
一段实时更新的时间代码
2006/07/07 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
javascript jscroll模拟html元素滚动条
2012/12/18 Javascript
js数组操作学习总结
2013/11/04 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
Vuejs实现购物车功能
2017/11/05 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[08:40]Navi Vs Newbee
2018/06/07 DOTA
python在命令行下使用google翻译(带语音)
2014/01/16 Python
python中List的sort方法指南
2014/09/01 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
解决pymysql cursor.fetchall() 获取不到数据的问题
2020/05/15 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
函授毕业个人自我评价
2014/02/20 职场文书
个人汇报材料范文
2014/12/30 职场文书
单位实习介绍信
2015/05/05 职场文书
解除处分决定书
2015/06/25 职场文书
《祁黄羊》教学反思
2016/02/20 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python