微信扫码登录过程中所遇到的问题
最近有个一需求,相信很常见,是一个在登录页扫码登录,然后跳转首页,以及在其他页面绑定和解绑微信号
最开始项目起步,在项目里用的是用插件即vue-wxlogin 方便快捷,后面就是配置的问题了
首先appid,直接复制粘贴即可
其次遇到的第一个坑点
redirect_uri的参数应该填什么,为什么会报错
自己找了很多文章方法,其中大多是检查微信回调域名,看看是否加了http://,但是我觉得很多人应该是和我一样的,并没有报错,而且并不知道参数应该填什么,怎么写,这个时候可以尝试直接把微信那个回调域写进redirect_uri,比如你的回调域为aa.bb.com,直接尝试redirect_uri为aa.bb.com,到这一步,你的二维码应该是能出来了
接下来又一个坑点来了,为什么二维码出来了,我扫码了点了确定,页面不跳转的,而且还报错了
这是iframe跨域的问题,到这个时候,也会去搜,哎呀,怎么解决啊,别人只会告诉你,在iframe标签内添加
sandbox=“allow-scripts allow-top-navigation allow-same-origin” ,然后给你解释他们的作用原理,很显然,你并不知道在哪儿添加,如何使用的是vue-wxlogin这个插件的话,找到你的node_modules

你很神奇的发现这里有他的iframe标签

直接加进去就好了,如果是微信js版的,同理找js文件加属性
,做完这一步,你会发现,跳转了,但是出现了一个你没有看过的页面,最最神奇的是,上面的链接带有你需要的code码,到这儿的时候想了很多办法来获取code码,路由导航,路由截取等等
但是你会发现,路由导航对这个页面根本不起作用,完全不会触发路由导航的钩子,甚至于localStorage都换了,到这我也是真的很迷茫,那改个地址试试看,在很多文章上面都说后面带有html,改了直接报错,这是为什么呢
到这一步你应该或多或少明白了,怎么让它重定向在自己的页面,然后在去获取
其实这儿是要在服务器端调配的,即你打包给后台,后台部署,然后你看他上面的地址,例如他的地址是http"//aa.cc.com/xx/login,那么你的redirect_uri地址应该怎么拼接呢http"//aa.cc.com/xx/后面加你想跳转的页面当然了,这个是需要urlencode转码的,这个时候你就可以去那个页面拿取你的code,如过你的路由模式是hash模式的话window.location.href.substr(1).split("&")[0].split("=")[1]即可拿到,当然这是我自己的方式,你也可以取那个页面打开控制台来看自己需要切割的代码,如果理由的模式是history模式,直接this.$router.query+要取的key,取到只会在当前页面做逻辑判断跳转就可以了,
顺带一提,如果有绑定微信号,当然也是跳转这个页面
可以使用state属性来区分是从首页扫码的还是从绑定微信号扫码的
同理也是截取

window.location.href.substr(1).split("&")[1].split("=")[1]

然后调用判断调用不同的方法即可

个人总结