vue微信扫码登录

获取access_token时序图：

一、public中index.html引入sdk

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

二、使用官方提供方法生成二维码

<!-- 2、通过实例对象的方法，将二维码页面嵌入到本地页面中希望的位置 -->

<!-- 放二维码的容器 -->
<div id="wechat-login"/>

<script>
    // 创建微信登录的对象
    new WxLogin({
        self_redirect: true, // 是否在iframe内跳转 redirect_uri
        id: 'wechat-login', // 希望二维码嵌入容器的 id
        appid: 'appid',
        scope: 'snsapi_login',
        redirect_uri: '扫码成功后跳转的地址',
        href:    'data:text/css;base64,LmxvZ2luUGFuZWwubm9ybWFsUGFuZWwgLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5xcmNvZGUubGlnaHRCb3JkZXIgew0KICB3aWR0aDogMjAwcHg7DQogIGhlaWdodDogMjAwcHg7DQp9DQo=',
    })
</script>

修改样式需将css转换未base64格式添加给href参数

参数详见官方地址：准备工作 | 微信开放文档

实际使用：