实现微信扫码登录

在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始接入流程。

准备工作

1.注册开发者账号

可以在https://open.weixin.qq.com/ 这里申请开发的账号。由于是腾讯的网页，这里可以直接通过 QQ号进行登录。

2.提交网站应用审核

在已经登录的界面中选择“管理中心”——》网站应用——》创建网站应用

将会弹出下面的界面

填写过后，还有有一个页面需要填写，提交一份纸质版申请书扫描件（会提供模板，我们下载再来填写后，需盖章，签名），配置回调域名（扫码登录后会跳转的页面）等。

之后提交审核即可，等微信审核通过，我们即可获得我们需要的网页应用的appid和AppSecret，并配置后回调的域名了（这三样是我们开发所必须的）。

3.开发者资质认证

由于我们这里要使用微信登录的接口，所以我们还需要向微信提出认证，只有认证了才能使用微信那些高级的接口。未认证的如下图所示

认证之后是这样子的：

参数说明

参数	是否必须	说明
appid	是	应用唯一标识（前面认证网页应用中获得）
redirect_uri	是	重定向地址，需要进行UrlEncode（前面认证网页应用中获得）
response_type	是	填code
scope	是	应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
state	否	用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验

项目中获取二维码

1.引入js文件

在项目中引入

<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

2.使用该 js 包提供的 api 创建二维码

 const object = new WxLogin({
    self_redirect: false,
    id: 'wx-code', // 需要显示的容器id
    appid: 'wx56c86096f66ce750', // 公众号appid wx*******
    scope: 'snsapi_login', // 网页默认即可
    redirect_uri: encodeURIComponent(`https:xxx/#/loginLoading`), // 授权成功后回调的url，前面部分是应用中设置的授权回调域，后面部分是跳转路由，推荐设置一个中间页面实现跳转后的逻辑
    state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
    style: 'black', // 提供"black"、"white"可选。二维码的样式
    // 二维码样式及其它（关于样式自定义可在网上查阅到相关的实现）
	href:   				'data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge3dpZHRoOiAyMTBweDt9Ci5pbXBvd2VyQm94IC5pY29uMzhfbXNnLnN1Y2Mge2Rpc3BsYXk6IG5vbmV9Ci5pbXBvd2VyQm94IC5pY29uMzhfbXNnLndhcm4ge2Rpc3BsYXk6IG5vbmV9Ci5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjt9Cg==',
  });

3.跳转到中间页

用户扫码登录后会跳转到上面设置的路径 redirect_uri，并且会携带一个 query 参数，参数名为 code,其中含有用户的授权信息。

可以通过将code传给后端等一系列操作，进行自己项目的逻辑判断。

//调用接口，将code传给后端
const code=route.query.code
useRequest(code).then(res=>{
    localStorage.setItem('token', res.data.data.token); // userToken存入缓存
    router.push({ // 跳转首页
        path:'/index'
    })
})