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=
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 = '';
写完收工
更多推荐
所有评论(0)