vue实现pc端扫码登录

vue pc端微信扫码登录

效果图

方式一：npm

安装并引入插件

wxlogin

    // 安装
    npm install vue-wxlogin -S

    // 局部引入
    import wxlogin from 'vue-wxlogin';

    // 注册组件
    components: {
        wxlogin
    }

参数说明

使用

<wxlogin
	class="login"
    appid="wxappid"
    :scope="'snsapi_login'"  
    :theme="'black'"  
    :redirect_uri='encodeURIComponent(`https://www.test.com/project/#${fullPath}`)'
    :href="'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsKICBkaXNwbGF5OiBub25lOwp9Ci5pbXBvd2VyQm94IC5xcmNvZGUgewogIHdpZHRoOiAyMjVweDsKICBoZWlnaHQ6IDIyNXB4Owp9'"
	:state="`${Math.random()}`"
 >
</wxlogin>

自定义样式

• 把自定义的样式，转换为base64格式
• 使用text/css模式

// 根据需求自定义二维码样式
.impowerBox .title {
  	display: none;
}
.impowerBox .status.status_browser {
  	display: none;
}
.impowerBox .qrcode {
  	border: none;
  	width: 225px;
  	height: 225px;
}
.impowerBox .status{
  	display: none
}

方式二：通过js

引用js文件

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

vue

<div id="container">
	<div id="wxLogin"></div>
</div>

使用

<script>
    export default {
        data() {
            return {
                QRCodeStyle: `data:text/css;base64,QGNoYXJzZXQgIlVURi04IjsNCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7ZGlzcGxheTogbm9uZTt9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fSANCg==`
            }
        },
        mounted() {
        	// 微信登录
            getWxLogin();
        },
        methods: {
        	getWxLogin() {
        		let url = 'https://www.xxxxx/#/shop';
	            var obj = new WxLogin({
	                id: "wxLogin",
	                appid: "wxappid",
	                scope: "snsapi_login",
	                // 扫码成功后 跳转的地址
	                redirect_uri: encodeURIComponent(url), // 授权成功后回调的url
	                state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
	                style: 'black',
	                href: this.QRCodeStyle
	            });
			}
        }
    }
</script>

注意

• redirect_uri: 回调地址，进行编码【encodeURIComponent】
• redirect_uri: 确定登录后会重定向url上携带code、state参数
• 首先，在开放平台申请账号，认证，创建网站应用

https://www.test.com/project/#/login?code=xxx&state=xxx