#### 微信掃碼登錄-內嵌版 1. 先引進wxLogin的cdn文件 ~~~ <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> ~~~ #### 2.跳中間頁來實現掃碼登錄: 例如在login.vue里面掃碼登錄，然后跳轉到loginSuccess.vue(中間頁),再跳轉到主頁面 2.1 在login.vue的代碼如下： ~~~ // 在template的代碼： <div id="qrcode"></div> // js created () { var obj = new WxLogin({ id: "qrcode", appid: appID, scope: "snsapi_login", redirect_uri: "http%3A%2F%2Flaws.genesysinfo.net%3A8090%2F%23%2Floginsuccess", state: "", style: "black", href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDE4MHB4O21hcmlnbi10b3A6LThweH0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge2Rpc3BsYXk6IG5vbmU7fQ==" }); } ~~~ 鍵值說明： 1. Id: 是存放二維碼的容器， 2. appid: 是開發者在微信開房平臺提交申請后，獲得appid和一個秘鑰 3. scope: snsapi_login這個是代表網頁版 4. redirect_uri: 這個是掃碼后要跳轉的頁面，這個是要跳轉到loginsuccess頁面，這個路徑要urlEncode轉碼的，轉碼地址為（http://tool.phpshuo.com/UrlEncode.html）, **注意，要跳轉的地址必須在申請的域名下面。** 5. style: 代表二維碼的樣式，有black和white可選， 6. href: 修改二維碼的樣式，要經過base64位轉碼，地址為（https://the-x.cn/base64/）。 2.2 在loginsuccess.vue的代碼如下： ~~~ // js代碼 created () { let code=this.getUrlKey("code"); let state=this.getUrlKey("state"); this.getWeixin(code,state); }, methods: { // 公共方法 getUrlKey (name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null; }, // 通過code獲取微信信息 getWeixin(code,state){ util.ajax({ url:"url/userByCode?code=" + code, data:'' }) .then((res)=>{ console.log(res.data) }) .catch((err) => { console.log(err) }) }, } ~~~ 3 在當前獲取用戶微信掃碼登錄的信息 ~~~ // 這個代碼等于 2.1 + 2.2 的代碼 // 因為是在當前頁面添加code的，界面沒有刷新，只是添加參數，所以就必須監測路由參數的變化 watch: { $route(){ if(this.$route.query.code!=undefined) { this.getWeixin(this.$route.query.code,this.$route.query.state); } } } ~~~