寫在前面：最近有個需求需要實現使用微信掃碼登入成功後，網站跳轉到Home頁，就不需要使用者手動輸入使用者名稱和密碼進行登入了，後面由於各種原因又不需要這個功能了，於是將這2天研究的微信網站掃碼登入做個記錄，方便以後開發該功能的時候再取用

微信開發平臺申請網站應用：https://open.weixin.qq.com/

微信官方文件：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

一、申請網站

進入上方第一個連結，申請微信登入網站的許可權，設定網站的資訊，注意網站填寫的地址和授權作用域

授權作用域決定了我們可以獲取到微信提供的哪些許可權

申請之後，微信官方稽核通過就可以在進行開發了

二、生成微信登入的二維碼

我這裡找的是網上提供的code和appid生成的二維碼，實際開發過程中code是在使用者授權登入後，會在跳轉的連結上面的拼接code引數返回。

1）在index.html中引入微信登入的官方js檔案

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

2）定義展示二維碼的容器

<div id="login_container"></div>
mounted(){
        
 
this.init()
    },
    methods:{
        init(){
            var obj = new WxLogin({
                self_redirect:false,
       id:'login_container',
       appid:'wxe19e3e2415e89353',
       scope:'snsapi_login',     redirect_uri:encodeURIComponent('http://www.coolarch.net/Mingzhu/wechat/callBack'),
       state:
 
'1211111',
       style:'black',
       href:'',
            });
        }
    }

3）生成的二維碼如下

4）掃描登入之後就可以通過code和appid去獲取使用者的access_token，然後通過access_token獲取使用者的資訊，前提是

步驟寫的有些簡潔，這裡附上其他大佬總結的，會更加清晰：

https://blog.csdn.net/weixin_43737917/article/details/106002566?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param

http://xuedingmiao.com/blog/wx_scan_login_demo.html