Vue实现pc端扫码+跳转h5登录

2024-07-03 15:36| 来源: 网络整理| 查看: 265

扫码功能和后端研究了好久，看了很多文章，不太符合我们的需求还好写出来了，就把逻辑整理了一下用的是微信扫码（公众号）

需求是这样的：点击下图微信扫码，然后出现二维码，微信扫一扫跳转到h5页面，（如果微信没有绑定过就跳转绑定表单页面，填写表单成功后显示绑定成功，同时pc端登录成功，如果绑定过就跳转登录成功，同时pc端登录成功）

第一步：申请一个服务号，注意不是订阅号，订阅号没有授权的功能。网上很多教怎么申请的，这里就不说怎么申请的了现在我们就拿到了appid还有域名

第二步：点击微信的小图标，调用后端的接口得到uuid,同时开一个定时器检查uuid扫码状态，写到这里，前端的pc端逻辑就写完了（扫码确定后端会返回token）生成二维码

点击小图标获取uuid,前端拼接字符串生成二维码下载依赖 npm install qrcodejs2 --save 然后组件里引用 import QRCode from “qrcodejs2”;同时写一个定时器检查扫码状态，后端返回是过期的话显示二维码过期，点击刷新，同时清除定时器；后端返回已经登录状态就把传给前端的token放入缓存，同时路由跳转到主页，清除定时器这里的token就是每次axios请求头里带着去访问后端接口的令牌，如果有疑问可以去看我之前权限管理动态路由的博客

下面是我的代码

js部分

import QRCode from "qrcodejs2"; export default { data() { return { uuid: "", timer: null, baseUrl: process.env.VUE_APP_BASEURL, needUpdate: false, hasScan: false, hasSuccess: false, }; }, methods: { //点击刷新 update() { this.$refs.qrCodeContainer.innerHTML = ""; this.needUpdate = false; this.getUuid(); this.timer = setInterval(() => { this.checkUuid(); }, 1000); }, //生成二维码 bindQRCode() { new QRCode(this.$refs.qrCodeContainer, { //这里很重要，在网上看了这里都是微信重定向的地址，我们的需求实现不了，其实是后端的地址！！！！！！给后端去判断重定向 //https://open.weixin.qq.com/connect/qrconnectappid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 就是这一串，这里重定向的地址就是h5页面 text: this.baseUrl + "/acl/wx/wxScan/?uuid=" + this.uuid, width: 140, height: 140, colorDark: "#333333", //二维码颜色 colorLight: "#ffffff", //二维码背景色 correctLevel: QRCode.CorrectLevel.L, //容错率，L/M/H }); }, //得到uuid getUuid() { this.$api.getUUID().then((res) => { if (res.success) { this.uuid = res.data.uuid; this.bindQRCode(); } }); }, //检查uuid状态 checkUuid() { this.$api.checkUUID({ UUID: this.uuid }).then((res) => { if (res.data.ret === "3") { clearInterval(this.timer); this.hasSuccess = true; this.$ls.set("token", res.data.token); if (this.$ls.get("token")) { //路由跳转 this.$router.push({ name: "main" }); } } else if (res.data.ret === "2") { clearInterval(this.timer); this.needUpdate = true; } else if (res.data.ret === "1") { clearInterval(this.timer); this.hasScan = true; } }); }, }, mounted() { this.getUuid(); this.timer = setInterval(() => { this.checkUuid(); }, 1000); }, destroyed() { clearInterval(this.timer); }, //在页面离开时做的操作 beforeRouteLeave(to, from, next) { this.$destroy(); next(); }, };

html部分

扫码登录二维码已失效点击刷新已扫描请在手机上确认登录登录成功，跳转中… 请使用微信扫一扫扫描二维码登录返回登录

第三步： h5页面的逻辑，这里就没什么了，就是表单验证掉接口然后tab切换唯一要注意的是要把uuid带着传给后端

绑定手机号小牛后台管理系统获取验证码 {{ count }}s 手机号格式错误~ 该手机号还没被注册过~ 请勾选复选框~ 验证码格式错误~ 同意《服务协议》《统一登录隐私政策》绑定并登录绑定成功恭喜您微信和手机号绑定成功请使用微信扫码登录或手机号登录 export default { data() { return { phone: null, code: null, uuid: "", checkAgree: true, count: 30, isSend: true, timer: null, visible: false, visibleToo: false, visibleThird: false, visibleFifth: false, bindWechat: true, bindSuccess: false, bindFailure: false, }; }, methods: { //复选框状态改变 handleChange(e) { this.checkAgree = e.target.checked; }, //发送验证码 sendVerifyCode() { if (this.validatePhone(this.phone)) { const TIME_COUNT = 60; if (!this.timer) { this.count = TIME_COUNT; this.isSend = false; //验证手机号已经注册过 this.$api.isExist({ phone: this.phone }).then((res) => { // console.log(res) if (res.success) { //发送短信验证码 this.$api .sendSmsCode({ phone: this.phone, smsCodeType: 6, }) .then((res) => { // console.log(res) return; }); } else { this.visibleToo = true; this.phone = null; setTimeout(() => { this.visibleToo = false; }, 3000); } }); this.timer = setInterval(() => { if (this.count > 0 && this.count this.isSend = true; clearInterval(this.timer); this.timer = null; } }, 1000); } } }, validatePhone(value) { let phone = /^[1][3,4,5,6,7,8,9][0-9]{9}$/; if (!phone.test(value)) { this.visible = true; setTimeout(() => { this.visible = false; }, 3000); return false; } else { return true; } }, validateCode(value) { let code = /^[0-9]{4}$/; if (!code.test(value)) { this.visibleFifth = true; setTimeout(() => { this.visibleFifth = false; }, 3000); return false; } else { return true; } }, getUuid(url) { let num = url.indexOf("?"); let str = url.substr(num + 1); let arr = str.split("&"); let kv = []; arr.forEach((r) => { let n = r.indexOf("="); let k = r.substring(0, n); let v = r.substr(n + 1); let obj = {}; obj[k] = v; kv.push(obj); }); return kv; }, //绑定并登录 bindAndLogin() { if (this.validatePhone(this.phone) && this.validateCode(this.code)) { if (this.checkAgree) { this.$api .bindAndLogin({ phone: this.phone, code: this.code, uuid: this.uuid, }) .then((res) => { if (res.success) { this.bindWechat = false; this.bindSuccess = true; } else { this.bindWechat = false; this.bindFailure = true; } }); } else { this.visibleThird = true; setTimeout(() => { this.visibleThird = false; }, 2000); } } }, }, created() { let url = location.href; let arr = this.getUuid(url); let obj = arr.find((r) => r.uuid); if (obj != undefined) { this.uuid = obj.uuid; } }, destroyed() { clearInterval(this.timer); }, //在页面离开时做的操作 beforeRouteLeave(to, from, next) { this.$destroy(); next(); }, };

新手小白，写的不好，欢迎留言

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章