PC微信扫码登录-内嵌版1、引入wxLogin的cdn文件 2、跳中间页来实现扫码登录: 例如在login.vue里面扫

1、引入wxLogin的cdn文件

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

2、跳中间页来实现扫码登录:

例如在login.vue里面扫码登录，然后跳转到loginSuccess.vue(中间页),再跳转到主页面

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=="
        });
}

键值说明：

Id: 是存放二维码的容器，
appid: 是开发者在微信开房平台提交申请后，获得appid和一个秘钥
scope: snsapi_login这个是代表网页版
redirect_uri: 这个是扫码后要跳转的页面，这个是要跳转到loginsuccess页面，这个路径要urlEncode转码的，转码地址为（tool.phpshuo.com/UrlEncode.h…, 注意，要跳转的地址必须在申请的域名下面。
style: 代表二维码的样式，有black和white可选，
href: 修改二维码的样式，要经过base64位转码，地址为（the-x.cn/base64/）。

注意:

1、这个redirect_uri一定要写对，不然二维码显示不出来，如果发现二维码过大或者你不想要的样式，你可以在href填入一个链接,用其中的样式覆盖。 2、使用转码工具(上面发的地址)转redirect_uri的时候，不需要把www加进去，否则二维码一样会显示不出来,比如 www.containercode.com/html/index.…

这个地址转的时候需要把www.去掉先

containercode.com/html/index.…

href链接的创作过程: 先在本地创建一个qrcode.css文件

.loginPanel .normalPanel {
  display: flex;
}

.impowerBox .qrcode {
  width: 150px;
  height: 150px;
}

.impowerBox .title {
  display: none;
}

.impowerBox .info {
  width: 150px;
}

.status_icon {
  display: none
}

.impowerBox .status {
  text-align: center;
}

然后把css文件复制到the-x.cn/base64/网站中进…

在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)
        })
    },
}

在当前获取用户微信扫码登录的信息

// 这个代码等于 2.1 + 2.2 的代码
// 因为是在当前页面添加code的，界面没有刷新，只是添加参数，所以就必须监测路由参数的变化
watch: {
	$route(){
        if(this.$route.query.code!=undefined)
         {
             this.getWeixin(this.$route.query.code,this.$route.query.state);
        }
    }
}

参考链接：