Vue微信Pc端扫码登录，Pc端微信扫码支付。

Vue微信Pc端扫码登录，Pc端微信扫码支付。

一、Pc端扫码登录

第一种方法：

1.在src/public/index下cdn引入微信wxLogin.js；

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

2、在需要的页面位置上写入

 <div style="height: 200px;" id="wechat_code"></div>

记录踩坑：
如果UI使用的element，微信扫码是弹窗，刚开始用的el-dialog，但是打开弹框后二维码迟迟不渲染，或者说二维码渲染不到el-dialog上，自己写了一个弹框就好了。

3.mounted方法里写入

mounted() {
     var obj = new WxLogin({
	    self_redirect: false,
	    id: "wechat_code",   // 需要显示的容器id
	    appid: "xxxxxxxxxxxxxxxxxx",	// 公众号appid
	    scope: "snsapi_login",      网页默认即可
	    redirect_uri: encodeURIComponent('http://10.10.10.xxx:8080'),  //回调域名
	    state: Math.random(), // 可设置为简单的随机数加session用来校验
	    style: "white",// 提供"black"、"white"可选。二维码的样式
	    href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge3dpZHRoOiAyMDBweDt9Ci5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30NCiN3ZWNoYXRfY29kZT5pZnJhbWV7aGVpZ2h0OiAyODBweDt9",
	    //需要的css样式编译成base64格式
  });
},

扫码之后会自动跳转到你的回调地址上并附带需要的code；this.$route.query.code之后，将code传给后台获取openid以及微信用户信息

第二种方法：

1、引入vue-wxlogin

npm install vue-wxlogin --save-dev

2、需要的页面import

import wxlogin from 'vue-wxlogin';

components: { wxlogin },

3、引入组件template中写入

<wxlogin
	style="height: 200px;"
	appid="xxxxxxxxxxxxxxx"
	scope="snsapi_login"
	theme="'black'"
	:redirect_uri="encodeURIComponent('https://www.xxxxxx.com')"
	:href="href"
	rel="external nofollow"
></wxlogin>

完事

—————————————————————————————————————

二、Pc端扫码支付

调取后台接口，传入需要的值，会拿到一串字符串，前端需要做的就是将这串字符串嵌入到二维码中，生成二维码拱微信端扫码支付；

一种情况是后端直接生成二维码图片链接返给前端，另一种请情况是后端返回字符串前端来生成二维码，本次记录前端生成二维码方法

1、引入二维码插件qrcode

npm install qrcodejs2 --save

2.使用方法，定义一个方法qrcode()

import QRCode from 'qrcodejs2';

<div id="qrcode" class="width-200 height-200"></div

return {
   		ispay: false,
   		qrcodes: null,
   		timers:null,
   	};
},

qrcode(code) {
   		this.qrcodes = new QRCode('qrcode', {
   			width: 200, //二维码宽度
   			height: 200, // 二维码高度
   			text: code, // 二维码内容，这里就是后端返回的字符串
   			render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
   		});
   	},

这样就生成成功了

扫码支付需要监听支付时候支付成功，后端写一个验证支付时候成功的一个接口，我们写一个定时器开监听支付是否成功
生成二维码的时候引入监听方法

qrcode(code) {
   		this.qrcodes = new QRCode('qrcode', {
   			width: 200, //二维码宽度
   			height: 200, // 二维码高度
   			text: code, // 二维码内容，这里就是后端返回的字符串
   			render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
   		});
   		let _this = this;
   		_this.getOrderstate()
   	},

getOrderstate(){		//判断支付是否成功，监听微信支付是否成功
   		let _this = this;
   		let num = 0;
   		_this.timers = setInterval(()=>{
   			num++;
   			let user = JSON.parse(localStorage.getItem('userInfo'));
   			let obj = {
   				userId:user.userId,
   				courseId:_this.$route.query.id
   			};
   			this.$api.iotHome.buyFlag(obj).then(res=>{
   				if(res.data){
   					document.body.style.overflow = '';
   					document.addEventListener('touchmove', { passive: true });
   					clearInterval(this.timers)
   					this.ispay = false;
   					this.$message.success('支付成功');
   					setTimeout(()=>{
   						this.$router.go(-1)
   					},500)
   				}
   			});
   			if(num == 500){
   				this.ispay = false,
   				//别忘了清除定时器
   				clearInterval(this.timers)
   			}
   		},1500)
   	},

   beforeDestroy(){ 		//跳转页面时关闭定时器
   	if(this.timers){
   		clearInterval(this.timers)
   	}
   },

刷新二维码需要先清楚二维码

第一种:

   this.qrcodes.clear(); // 清除代码
   _this.qrcodes.makeCode(code);

第二种:

// 清除二维码
   clearInterval(_this.timers)
   document.getElementById('qrcode').innerHTML = '';

写完收工