#### 微信扫码登录-内嵌版 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); } } } ~~~