vue3+vite微信二维码扫描登录教程，简单易懂，提供多种方法，写这个的时候也是遇到很多坑，记录并分享一下心得体会

2024-07-09 13:56| 来源: 网络整理| 查看: 265

首先这里放上微信官方的文档：微信登录功能 / 网站应用微信登录开发指南 (qq.com)

我们先来简单说一下整体流程

其实大致流程文档中有，说白了就是这个图片

用文字的话来说就是：先请求code，然后通过你自己定义好的回调页面去拿code和state，

redirect_uri?code=CODE&state=STATE

我们要去实例化我下面封装好的东西，然后在iframe中去打开一个用于你展示二维码和整个扫描状态的网站

还要在上面定义一个容器去装这个二维码，也就是下面提到的容器ID

实例时候的一些参数直接看文档（没有几个参数，很方便看），我这里就不再把文档抄一遍了，直接上手开始写代码

下面在项目中开始干活我们首先在vue中封装一个用来生成实例的API，这个直接拿过去用就行 const WxLogin = function (e) { var r = "default"; !0 === e.self_redirect ? (r = "true") : !1 === e.self_redirect && (r = "false"); var n = document.createElement("iframe"), i = "https://open.weixin.qq.com/connect/qrconnect?appid=" + e.appid + "&scope=" + e.scope + "&redirect_uri=" + e.redirect_uri + "&state=" + e.state + "&login_type=jssdk&self_redirect=" + r + "&styletype=" + (e.styletype || "") + "&sizetype=" + (e.sizetype || "") + "&bgcolor=" + (e.bgcolor || "") + "&rst=" + (e.rst || ""); (i += e.style ? "&style=" + e.style : ""), (i += e.href ? "&href=" + e.href : ""), (i += "en" === e.lang ? "&lang=en" : ""), (n.src = i), (n.frameBorder = "0"), (n.allowTransparency = "true"), (n.scrolling = "no"), (n.width = "300px"), (n.height = "400px"); var s = document.getElementById(e.id); s.innerHTML = "", s.appendChild(n); }; 然后在进入你需要生成二维码页面的地方，在初始化的生命周期中执行下面的代码 const setWxerwma = () => { var obj = new WxLogin({ id: '容器id',// 需要显示的容器id appid: '你的appid', scope: 'snsapi_login', redirect_uri: encodeURIComponent('成功后的回调页面地址'), state: new Date().getTime() + '' + Math.ceil(Math.random() * 1000), //建议使用时间戳+随机数，具体看你 style: 'style',// 提供"black"、"white"可选。二维码的样式 href: ''// 外部css文件url，需要https，或者使用base64编码的css }) }

这样就可以生成一个二维码了，下面细说一下可能遇到的问题

首先是关于href这个属性，官方给的说法是这样

说实话，这种方式非常拉跨，我这边建议使用base64转码之后的css样式，这里附转码网站：在线加密解密 (oschina.net)

我们转码成功之后，一定要在前面加上 data:text/css;base64, 这句话，也就是这个样子

href: 'data:text/css;base64,你转码之后的CSS'

这样我们就可以去自定义里面的CSS样式了，css具体咋写，就看各位的具体需求是什么就好了

redirect_uri这个回调页面与vue主页面传参，调用vue主页面方法

这里如果后端能给你提供同域名的回调当然很好搞，我们直接就在这里用你自己的路由页面就行，但是如果不是同域名，那么我们就需要去写一个html去做回调和扫码成功失败的事情。

由于这里本质上是一个iframe页面，我们想要再去给我们的vue项目传参或者触发里面的方法就得在windows全局挂载一个方法去触发

//写在你需要触发的地方 window.codeSuc = function (data) { console.log('登录成功了'); console.log('这是ifram向主页面传递的数据:' + data); };

然后我们提供给后端的html文件可以这样触发和传递数据，这样也可以获取到code和state的值去做相应的操作（code和state是扫描之后回调页面中给你带的）：

Document 这是一个二维码网站扫码成功 // 获取URL中的参数 function getParameterByName(name, url) { if (!url) url = window.location.href; name = name.replace(/[\[\]]/g, "\\$&"); var regex = new RegExp("[?&]" + name + "(=([^]*)|&|#|$)"), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, " ")); } function codeSuc() { console.log('扫码成功'); if (window.parent && window.parent.codeSuc) { window.parent.codeSuc('你好啊，我来了'); // 获取code和state参数的值 var codeValue = getParameterByName('code'); var stateValue = getParameterByName('state'); // 打印结果 console.log('Code:', codeValue); console.log('State:', stateValue); } else { console.error("扫码成功方法方法未在父页面中找到"); } }

实例化的那些事

最后，如果你不想用我封装的这个实例化方法，你自己去用官方的，这样引入也可以，不过实际投入生产还建议你拿下来放在自己项目里面，这几句话就放在我上面写的setWxerwma中，不过我这个封装的你直接用效果是一样的

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)

还有一种更简单粗暴的方法，下载相关依赖

你可以去下载这个版本的依赖："vue-wxlogin": "^1.0.4"，然后使用的话就非常简单粗暴，引入进入直接用，我觉得依赖太臃肿，懒得用了

import wxlogin from 'vue-wxlogin'

附上npm网址：vue-wxlogin - npm (npmjs.com)

关于如何取到连接中？后面的各个key，就比如www.baidu.com?aa=123中的aa,这是一个封装好的方法

const getParameterByName = (name, url) => { if (!url) url = window.location.href; name = name.replace(/[\[\]]/g, "\\$&"); var regex = new RegExp("[?&]" + name + "(=([^]*)|&|#|$)"), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, " ")); } //调用 getParameterByName(key,url)

以上就是我对微信二维码登录整体流程的参考和见解，里面如果有发现一些需要补充的或者需要修改的地方请与我联系，感谢各位，大家一起学习进步，后续如果我还发现一些比较关键的，需要补充的东西也会加入这篇文章

【本文地址】

公司简介

联系我们