前言

之前也做过公众号相关的开发，网页授权、模板消息、关键词回复、自动回复、设置公众号菜单等配置我搞过。但为啥不记得网页授权返回最上面一层显示空白页面的问题了呢？小朋友…我现在有一些？回忆了一下，应该是当前授权模式跟之前的网页授权模式不同，之前是只在刚进入某个具体页面时获取授权。
有这么一句话：只要我们够努力，老板才能开上法拉利，只要我们够辛苦，老板才能提路虎。二期小程序也做完以后，公众号的开发需求就如约…不期而至。用户在公众号中可以看到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');}这样就可以实现用户不能左滑右滑返回上一页了,只能乖乖的点击按钮回到公众号主页消息中了.

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

H5微信公众号授权登录
目录一.封装获取code的函数.存储token函数.获取token函数二.点击请求微信公众号授权并跳转三.重定向跳转会当前链接获取code登录四.整体流程的描述: 一.封装获取code的函数. ...
微信公众号授权步骤详细步骤介绍和整合springboot开发（java版）
文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源. 一.微信公众号授权步骤首先到微信公众平台注册账号,可以看到有四种类型(服务号,订阅号,小程 ...
微信公众号授权登录（asp.net + angular）
微信是时下最火的,上面有数以亿计的用户,如果能接入微信将大大减低注册门槛,当然,接入微信登录是有门槛的.微信登录一般有两个,一个是微信开放平台授权登录,一个是微信公众号授权登录,两者都需要认证才可以继 ...
Java在Web端微信公众号授权登录
Java在Web端微信公众号授权登录 1.需要在微信开发平台配置 url:是自己服务中的微信需要推给你的地址(需要使用二级域名,可以去添加链接描述)购买9块钱1个月使用权或者白嫖都可 token 这个 ...
uniapp中h5网页微信公众号授权
uniapp微信网页授权 uniapp中h5网页微信公众号授权主要代码获取code返回的code截取代码 uniapp中h5网页微信公众号授权微信官方文档–>网页授权 uniapp中h5网 ...
【SpringBoot学习】46、SpringBoot 集成 Uniapp 实现微信公众号授权登录
文章目录一.公众号环境搭建二.Spring Boot 集成微信公众号 1.application.yml 微信配置 2.控制层接口三.Uniapp 实现授权登录一.公众号环境搭建本篇文章使用 ...
vue微信公众号授权开发流程
vue微信公众号授权开发流程项目采用的是vue2.0开发的,还未更新到vue3.0.项目描述:只有通过微信授权登录,不需要绑定手机号. 1.注册公众号,这个不多说了 2.配置公众号在[公众号设置] ...
基于Spring Boo微信公众号授权登录获取用户信息（附带完整源码）
简介微信公众号开发中,必不少可少的一环:公众号授权登录.获取微信用户信息. 本地完整运行环境准备内网渗透=>生成本地指定端口映射的外网域名传送门:内网渗透工具Natapp使用详解域名生成 ...
微信登录(微信公众号授权)的开发（详解）
1.UnionId和OpenId 微信登录最重要的两个返回信息,一个是UnionId,一个是OpenId.两者之间有着必然的联系. 首先,先来理一下微信开放平台的架构.开发微信登录,必须有一个开放平台 ...
vue移动端项目微信公众号授权登录
前言在我们做移动端项目时, 很多功能是以登录后才能进行后续的操作, 并且许多pc端的网页都有微信扫码登录功能, 为了做到pc与移动端统一, 往往移动端项目需要添加微信登录功能, 那么为什么手机端不能 ...

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

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

前言

环境

迷途

知返

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

最新文章

热门文章