VUE Element UI项目中实现微信扫码登录功能

Posted 2021-04-16 小笑残虹

1、配置二维码的主要代码：

mounted() { // 调用生成微信登录二维码的方法 this.setWxerwma(); },//生成微信登录二维码   这个方法写在methods里面 setWxerwma() { // 第一步：引入远程js文件 const s = document.createElement("script"); s.type = "text/javascript"; s.src = "https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"; const wxElement = document.body.appendChild(s); wxElement.onload = function() { // 微信登录实例JS对象 var obj = new WxLogin({ self_redirect: true, id: "wxMaContainer", // 需要显示的容器id appid: "wx7b77b370dc780f6d", // 公众号appid wx******* scope: "snsapi_login", // 网页默认即可 redirect_uri: "http://idevice.zcpsxx.cn/Login/SSOLogin", // 授权成功后回调的url state: "zcrecord", // 可设置为简单的随机数加session用来校验 style: "black", // 提供"black"、"white"可选。二维码的样式 href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDE0MHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7ZGlzcGxheTogbm9uZTt9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fQ==" // 外部css文件url，需要https }); }; },

2、修改二维码的样式

因为这个二维码是通过一个iframe引进来的，所以没有办法直接通过写css代码来修改，所以在网上找到了一下办法，非常好用，总结下来。

.impowerBox .qrcode {width: 140px;}.impowerBox .title {display: none;}.impowerBox .info {display: none;}.status_icon {display: none}.impowerBox .status {text-align: center;}

我们用站长工具对样式代码进行base64加密：

站长工具网址：http://tool.chinaz.com/Tools/Base64.aspx

最后修改href参数，格式：href: "data:text/css;base64,base64加密后的字符串"

href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDE0MHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7ZGlzcGxheTogbm9uZTt9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fQ==" // 外部css文件url，需要https

最后就达到了我们想要的页面样式了。

3、tab切换二维码消失的坑

在切换tab时，我发现页面中的iframe都没有了。所以我的解决方案是，在切换这个tab时重新调用setWxerwma()这个方法来重新生成二维码。

// 微信登录 wxlogin() { this.isConsent = true; this.isAgreement = false; this.wxshow = true; this.qqshow = false; this.activeIndex = 0; this.setWxerwma() },

好了今天就先记到这里，太困了！

最后附上完整代码：

<template> <div class="login"> <!-- 头部导航 --> <div class="mod-header"> <h1> <a href="javascript:void(0)" title="资产E登记平台">资产IN平台</a> </h1> <!-- <ul class="nav"> <li>首页</li> </ul>--> </div> <!-- 主体部分 --> <div class="mainbox"> <!-- 左侧内容区 --> <div class="leftBox"> <p>资产IN平台</p> <p>开放登记</p> <p>智能分享</p> </div> <!-- 右侧登录区 --> <div class="loginbox"> <div class="loginbox_head"> <p :class="activeIndex==0?'borderTop':''" @click="wxlogin">微信登录</p> <p :class="activeIndex==1?'borderTop':''" @click="qqlogin">账号登录</p> </div> <div class="loginbox_body"> <!-- 微信登录 --> <div class="wxbox" v-if="wxshow"> <div class="wx"> <!-- 存放二维码的容器 --> <div class="wxma" id="wxMaContainer"></div> <p>请使用微信扫描二维码登录</p> </div> </div>
 <!-- 账号登录 --> <div class="qqbox" v-if="qqshow"> <!-- <p class="shry">管理员登录</p> --> <el-form :model="shyInfo" :rules="rules" ref="loginForm"> <el-row style="margin-top:60px;height:40px;"> <el-col :span="18" :offset="3"> <el-form-item prop="UserName"> <el-input v-model="shyInfo.UserName" placeholder="请输入您的账号"></el-input> </el-form-item> </el-col> </el-row> <el-row style="margin-top:20px;height:45px;"> <el-col :span="18" :offset="3" style="height:40px;"> <el-form-item prop="Password"> <el-input v-model="shyInfo.Password" placeholder="请输入登录密码" show-password></el-input> </el-form-item> </el-col> </el-row> <el-row style="margin-top:20px;" type="flex" justify="center"> <el-col :span="18"> <el-form-item> <el-button class="loginBtn" type="primary" @click="login">登录</el-button> </el-form-item> </el-col> </el-row> </el-form> </div> <!-- 不同意协议显示提示信息 --> <p class="mustagreement" v-if="isAgreement">需要同意《资产IN登记平台服务协议》才能登录</p> </div> <!-- 登录框底部内容 --> <div class="loginbox_foot"> <div class="foot1"> <el-checkbox v-model="isConsent" @change="isagreement"></el-checkbox> <span> 同意 <a href="###">《资产IN登记平台服务协议》</a> </span> </div> <div class="foot2"> <el-checkbox label="下次自动登录" v-model="isAutoLogin" class="foot2"></el-checkbox> </div> </div> </div> </div> <!-- <el-button class="loginbtn" @click="saomaLogin">模拟扫码登录</el-button> -->  </div></template>
<script>export default { data() { // 添加手机号的验证规则 var checkPhone = (rule, value, cb) => { const regPhone = /^[1][3,4,5,7,8][0-9]{9}$/; if (regPhone.test(value)) { return cb(); } cb(new Error("请输入合法的手机号")); }; return { // 监听是否同意协议 isConsent: true, isAutoLogin: false, // 控制账号登录的显示与隐藏 qqshow: false, // 控制微信登录码的显示与隐藏 wxshow: true, // 控制同意协议信息的显示与否 isAgreement: false, activeIndex: 0, // 审核人员登录表单信息 shyInfo: { // UserName: "Admin", // UserName: "tester", UserName: "", Password: "" }, // 校外用户绑定手机号设置密码表单 bdsjh: { UserName: "", UserPassWord: "", shurePass: "", cate: "out" }, // 登录表单验证规则 rules: { UserName: [ { required: true, message: "请输入用户名", trigger: "blur" } ], Password: [{ required: true, message: "请输入密码", trigger: "blur" }] }, // 校内用户绑定工号表单 bdgh: { UserName: "", UserPassWord: "", cate: "inn" }, // 绑定手机号表单验证规则 bdsjhRules: { UserName: [ { required: true, message: "请填写手机号", trigger: "blur" }, { validator: checkPhone, trigger: "blur" } ], UserPassWord: [ { required: true, message: "请设置密码", trigger: "blur" } ], shurePass: [ { required: true, message: "请再次输入您的密码", trigger: "blur" } ] }, // 绑定工号表单验证规则 bdghRules: { UserName: [ { required: true, pattern: /^\d{7}$/, message: "请输入工号长度为7的数字值", trigger: "blur" } ], UserPassWord: [ { required: true, message: "请输入密码", trigger: "blur" } ] } }; }, created() { var _this = this; document.onkeydown = function(e) { //按下回车提交 let key = window.event.keyCode; //事件中keycode=13为回车事件 if (key == 13) { _this.login(); } }; }, mounted() { // 调用生成微信登录二维码的方法 this.setWxerwma(); }, methods: { // 登录按钮 login() { var _this = this; this.$refs["loginForm"].validate(valid => { if (valid) { // 预校验成功 // 发起登录请求 _this .$http({ method: "post", url: "/Login/AdminLogin", data: this.shyInfo, transformRequest: [ function(data) { //在请求之前对data传参进行格式转换 let formatData = []; for (var it in data) { formatData.push(it + "=" + data[it]); } return formatData.join("&"); } ] }) .then(response => { if (response.status == 200) { // 1、将登录成功之后的token，保存到 sessionStorage 中 // 2、然后跳转到首页 // window.sessionStorage.setItem('token',response.data.token); var udata = response.data; if (udata.err == "") { window.sessionStorage.setItem( "userinfo", JSON.stringify(udata) ); // 请求数据字典 _this .$http({ method: "post", url: "/DataGate/GetAlDictData" }) .then(response => { window.sessionStorage.setItem( "dict", JSON.stringify(response.data) ); this.$router.push("/home"); }); } } }) .catch(err => { console.log(err); }); } else { // 预校验失败 _this.$message({ message: "请填写您的用户名和密码！", type: "warning" }); } }); }, //生成微信登录二维码 setWxerwma() { // 第一步：引入远程js文件 const s = document.createElement("script"); s.type = "text/javascript"; s.src = "https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"; const wxElement = document.body.appendChild(s); wxElement.onload = function() { // 微信登录实例JS对象 var obj = new WxLogin({ self_redirect: true, id: "wxMaContainer", // 需要显示的容器id appid: "wx7b77b370dc780f6d", // 公众号appid wx******* scope: "snsapi_login", // 网页默认即可 redirect_uri: "http://idevice.zcpsxx.cn/Login/SSOLogin", // 授权成功后回调的url state: "zcrecord", // 可设置为简单的随机数加session用来校验 style: "black", // 提供"black"、"white"可选。二维码的样式 href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDE0MHB4O30NCi5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9DQouaW1wb3dlckJveCAuaW5mbyB7ZGlzcGxheTogbm9uZTt9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fQ==" // 外部css文件url，需要https }); }; }, // 模拟扫码登录 saomaLogin() { this.$http({ method: "post", url: "/Login/SSOLogin", // data: "testid=10ED7990-ED52-42E3-B65C-63E09D794954" data: "testid=2345223" }) .then(response => { if (response.status == 200) { // 1、将登录成功之后的token，保存到 sessionStorage 中 // 2、然后跳转到首页 // window.sessionStorage.setItem('token',response.data.token); var udata = response.data; if (udata.err == "") { window.sessionStorage.setItem("userinfo", JSON.stringify(udata)); // 如果 data.st=='bon' 代表绑定过手机号了直接跳转到首页 if (response.data.st == "bon") { // 请求数据字典 this.$http({ method: "post", url: "/DataGate/GetAlDictData" }).then(response => { window.sessionStorage.setItem( "dict", JSON.stringify(response.data) ); this.$router.push("/home"); }); } else { //用户没有绑定手机号，需要跳转到用户手机号绑定页面 this.$router.push("/userBond"); } } } }) .catch(err => { console.log(err); }); }, // 账号登录 qqlogin() { this.isConsent = true; this.isAgreement = false; this.qqshow = true; this.wxshow = false; this.activeIndex = 1; }, // 微信登录 wxlogin() { this.isConsent = true; this.isAgreement = false; this.wxshow = true; this.qqshow = false; this.activeIndex = 0; this.setWxerwma() }, // 是否同意协议 isagreement(e) { if (e == true) { this.isAgreement = false; if (this.activeIndex == 1) { this.qqshow = true; } else { this.wxshow = true; this.shyshow = true; } } else { this.isAgreement = true; this.wxshow = false; this.qqshow = false; this.shyshow = false; } } }};</script>
<style lang="css" scoped>.login { width: 100%; height: 100%; background: url(../assets/login_bg.jpg); background-size: cover; overflow: hidden;}.mod-header { height: 80px; line-height: 80px; background: rgba(0, 0, 0, 0.3); color: white; display: flex; justify-content: space-between;}h1 { width: 45%; font-size: 32px; margin-left: 5%;}h1 a { color: white; text-decoration: none;}.nav { width: 25%;}.mainbox { display: flex; justify-content: space-around; align-items: center; margin-top: 120px;}.loginbtn { margin-top: 5%; margin-left: 48%;}.loginbox { width: 444px; height: 400px; background: #fff; border-radius: 10px; overflow: hidden; position: relative;}
.qqbox p { text-align: center; color: #666;}.zh { display: flex; justify-content: center; margin-top: 40px;}.ma { width: 84px; height: 84px; margin-left: 10px;}.ma img { width: 100%; height: 100%;}.leftBox { width: 500px; height: 300px; color: white;}.leftBox p { text-align: justify;}.leftBox p:nth-child(1) { font-size: 90px;}.leftBox p:nth-child(2) { height: 60px; line-height: 60px; text-align: justify; font-size: 36px; letter-spacing: 100px; word-break: keep-all; white-space: nowrap;}.leftBox p:nth-child(3) { height: 60px; line-height: 60px; text-align: justify; font-size: 36px; word-break: keep-all; white-space: nowrap; letter-spacing: 100px;}.loginbox_head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;}.loginbox_head p { width: 50%; height: 50px; line-height: 50px; font-size: 16px; text-align: center; margin-top: 0; border-top: 5px solid #fff; cursor: pointer;}.loginbox_head p:hover { color: #2980ff;}.loginbox_head .borderTop { border-color: #2980ff; color: #2980ff;}.loginbox_foot { width: 100%; position: absolute; bottom: 0px; left: 0px;}.foot1 { text-align: center; margin-bottom: 20px; font-size: 14px; color: #606266;}.foot1 span { margin-left: 5px;}.foot1 a { color: #606266;}.foot1 a:hover { color: #2980ff;}.foot2 { margin-left: 10px; margin-bottom: 10px;}.wx { margin-top: 40px;}.wx p { text-align: center; font-size: 14px; color: #606266;}.wxma { width: 150px; height: 150px; margin: 20px auto;}.wxma img { width: 100%;}.mustagreement { text-align: center; color: #666; margin-top: 130px;}.el-link { margin-left: 15%;}.shry { text-align: center; margin-top: 30px;}.loginBtn { width: 100%;}.pdetail { text-align: center; margin-top: 20px; font-size: 16px; color: #67c23a;}.pdetail i { margin-right: 10px; font-size: 18px; font-weight: bold;}.wjmm { text-align: center;}.wjmmLink { margin-left: 0px;}#wxMaContainer{ display: flex; justify-content: center;}</style>