网页QQ，微信扫码登录

在做一些toc项目的时候不仅是需要用到手机号登录，有些是需要用到qq和微信扫码登录的场景那么下面我就举例qq微信扫码登录的步骤

微信扫码:

1：可以先去微信开发文档观看说明

传送门:关于微信快速登录功能的说明 | 微信开放文档

2：看完后大家都清楚需要这几个参数

 var obj = new WxLogin({
 self_redirect:true,    //固定
 id:"login_container", //固定的
 appid: "",      //自己填写项目的
 scope: "snsapi_login",  //固定的
 redirect_uri: "",      //这里扫码成功的回调地址
  state: "",            //随机数    Math.ceil(Math.random() * 1000)
 style: "",              //二维码样式
 href: ""               //二维码样式
 });

3：准备微信的 wxjsdk，网上可以搜索到如果你是项目是用vue来写的特别是vue3那么你不能用script标签来引入因为vue3不支持。只能在项目根目录下创建一个wxjsdk.js通过export来导出贴个图片避免有些小伙伴不清楚怎么操作

 然后通过import导入 然后通过var obj = new xxx 你要导出的变量名

4：那么此时你只需要在加载出微信二维码出来后，按照一定的时间去轮询后端给的接口就行，只要二维码出现了，用户扫码的情况下后端会有成功或的回调结果，你再通过轮询后端接口拿到就行

注意：后端是要去向微信申请redirect_uri的回调地址包括下面的QQ也是一样要申请回调地址的，或者让经理去申请，前端不要管！！！

 

QQ扫码：

1：先去看QQ的官方文档说明

传送门：准备工作_OAuth2.0 — QQ互联WIKI

2：看完后不建议vue或者react使用框架的写button按钮。想写什么元素就写什么只要能触发就行，但是前提是要在元素上绑定用官方说的id用ref等都可以，只要拿到节点就行

3：引入qq.jsdk这个很好找自己去找就行官方也有给，还是一样的因为博主使用的是vue3只能存在一个script标签并不是像官网一样的示例直接通过script标签引入，所以依然创建一个名为qqsdk.js，还是一样通过export导出

 通过import引入使用

 上面图片参数呢，小伙伴们看完官方文档应该也看得懂，这里可以设置跳出来的qq登录的界面调整页面的大小尺寸。这里也一样扫码后端会有成功回调你只需要去轮询后端给的接口即可

如有不懂可以后台私信问我