微信公众号授权成功重定向后点击返回最上一层时显示空白页

最新推荐文章于 2024-07-07 16:47:39 发布

longlongValue

最新推荐文章于 2024-07-07 16:47:39 发布

阅读量3.6k

点赞数

分类专栏：技术笔记文章标签：微信前端 javascript 网页授权网页授权空白页面

本文链接：https://blog.csdn.net/longlongValue/article/details/126872292

版权

技术笔记专栏收录该内容

38 篇文章 2 订阅

订阅专栏

微信公众号授权返回时显示空白页

前言
环境
迷途
知返

前言

之前也做过公众号相关的开发，网页授权、模板消息、关键词回复、自动回复、设置公众号菜单等配置我搞过。但为啥不记得网页授权返回最上面一层显示空白页面的问题了呢？小朋友…我现在有一些？回忆了一下，应该是当前授权模式跟之前的网页授权模式不同，之前是只在刚进入某个具体页面时获取授权。
有这么一句话：只要我们够努力，老板才能开上法拉利，只要我们够辛苦，老板才能提路虎。二期小程序也做完以后，公众号的开发需求就如约…不期而至。用户在公众号中可以看到3个大菜单：报表（总览）、管理（设备管理、订单管理）、我的，以及若干子页面，在进入以上任何一级页面的时候，都需要去微信那里拿一个code来对用户进行认证，认证成功服务端再给一个临时的通讯令牌。后面的所有交互全部以通讯令牌为用户标识。

环境

Language： Vue 2.x
Tool： VS Code + 微信开发者工具
Server：JAVA（复用PC端接口）

迷途

因为需要每次当用户第一次进入页面时，就去拿授权Code进行用户认证获取临时通讯临牌，并且该通讯令牌在进入页面后还要使用。故，我将与微信认证的交互写在了router的路由前置过滤器中。只有认证完成后才会next()进行页面跳转显示。PS：写在App.vue中也可以，但需要写一个全局异步回调，在用户进入的页面中使用这个回调继续页面请求操作。参考

很顺利的，我将所有页面开发完成并完成了联调测试。但大多数时候，不出意外的话，意外就要发生了…

当我在微信公众号中进行操作时发现用户进入的第一个页面底部的返回按钮是可以操作的！并且点了返回按钮出现了空白页面。在这里插入图片描述
没有错，首页就应该给个特写。此页面底部返回按钮是可以点击的！！！并且返回了空白页面。

于是乎，我就开始查看空白页面的原因。我的页面->右上角复制链接 + 空白页面->右上角复制链接。发现两个链接竟然是一模一样的。我的天呐~怎么回事？在路由前置拦截器中来一个log日志吧，看看我这个返回时从哪里来，要到哪里去?

但在微信开发者工具中实际测试下来发现，当点击返回的时候路由前置拦截器什么都没有打印。反而出现了这么一个日志
在这里插入图片描述
这？如果我没猜错的话，是微信的授权页面吧！果然靠自己的努力是不够的。赶紧的找找大家的灵感

找了几个例如解决微信公众号授权成功后返回空白页发现没有解决我的问题（我是不可能承认自己没看懂的），后面也有看到解决微信授权成功后点击按返回键出现空白页和报错的问题，但全部都不好使，因为一旦从我的“”页面点击返回，就相当于离开Vue前端项目了，甚至在App.vue中写了销毁函数都不好使了。难道集思广益行不通了？

知返

很简单的问题，既然我想在离开Vue项目之前控制不要返回空白页面，那我干脆中间新建一个页面不就好啦？嗯，说干就干~，别想，就是你想的那个干。
本来的流程是

用户->Vue（我的）页面->微信授权页面->Vue（我的）页面

修改为：

用户->Vue（授权）页面->微信授权页面->Vue（授权）页面->Vue（我的）页面

这样一来，从“我的”页面返回离开进入“授权”页面时，路由前置拦截器就生效了，此时在这里调用微信的返回公众号对话框就可以了。
网上有不少小伙伴采用如下的方式:

WeixinJSBridge.call('closeWindow');

首先这种方式具有兼容性问题,必须如下写才能兼容苹果和安装:
document.addEventListener('WeixinJSBridgeReady', function() {
                    WeixinJSBridge.call('closeWindow');
                }, false);
WeixinJSBridge.call('closeWindow');
关闭的不是当前页面,而是整个浏览器,直接让你返回到公众号去

以上方式关闭的比较彻底，另外补充一下：

 首先呢我们换个角度思考一下问题,为什么要关闭当前页面呢?
 总之就是不想让用户在回到之前的页面去了呗
 那么,我们如果在微信的浏览器中禁止用户返回是不是就可以了呢
 //禁止网页返回上一页
 stopBack() {
   history.pushState(null, null, document.URL);
   window.addEventListener('popstate', function() {
       history.pushState(null, null, document.URL);
   });
 }
 //关闭整个浏览器
 back() {  
   document.addEventListener('WeixinJSBridgeReady', function() {
       WeixinJSBridge.call('closeWindow');
   }, false);
   WeixinJSBridge.call('closeWindow');
 }
 这样就可以实现用户不能左滑右滑返回上一页了,只能乖乖的点击按钮回到公众号主页消息中了.