微信扫码登录【第三方登录】

今天做的微信扫码登录

微信扫描登录分为2种 。

1、 跳转到其他页面生成二维码

2、 内嵌式生成二维码

因为项目中， 无法控制跳转页面关闭，而且为了好看【UI要求的】，做成了内嵌式扫描登录， 碰到了几个坑，特此记录

微信开放文档：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

步骤1：在页面中先引入如下JS文件（支持https）：http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

步骤2：在需要使用微信登录的地方实例以下JS对象：
weixinLogin(){
let state = new Date().getTime() + Math.round(Math.random() * 10000000); //随机生成6位数字，后面备用
 var obj = new WxLogin({
 self_redirect:true,
 id:"login_container", 
 appid: "", //后台提供
 scope: "snsapi_login", 
 redirect_uri: "", //后台提供
  state: "state",
 style: "black",
 href: "" //调节样式
 });

}

3、 新建一个DIV，id为  login_container。

坑点： 这个DIV不能嵌入到其他DIV，不然报  'innerHTML of null'

4、然后可以扫描登录。。 又一个坑出现了

在微信创建的html上面出现了返回的信息，但是无法拦截拿到。-_-||

5、后与后台商议，采用websocket或者轮询去拿这个数据。但是坑爹的websocket竟然不给面子的报错了，调试了半天，还是不行。 果断换轮询，由后台重新开接口， 去轮询查找数据，上面的随机六位数state作为标志， 后台每隔30分钟删除一次请求过的数据。

6、 后面就是根据具体业务去处理了。  我们是判断是否有id，如果没有，就跳到注册页面去注册。又就登录。

到此， 微信登录完成。