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

vue3微信二维码登录

前端小火龙

3213人浏览 · 2024-01-08 15:48:36

前端小火龙 · 2024-01-08 15:48:36 发布

首先这里放上微信官方的文档：微信登录功能 / 网站应用微信登录开发指南 (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是扫描之后回调页面中给你带的）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  这是一个二维码网站
  <button onclick="codeSuc()">扫码成功</button>
</body>

<script>
  // 获取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("扫码成功方法 方法未在父页面中找到");
    }
  }

</script>
</html>

实例化的那些事

最后，如果你不想用我封装的这个实例化方法，你自己去用官方的，这样引入也可以，不过实际投入生产还建议你拿下来放在自己项目里面，这几句话就放在我上面写的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"，然后使用的话就非常简单粗暴，引入进入直接用，我觉得依赖太臃肿，懒得用了

<template>
  <div id="app">
    <wxlogin :state="wxState" :appid="appid" @login-success="onLoginSuccess" :scope="'snsapi_login'" :theme="'black'" :redirect_uri="redirect_uri" rel="external nofollow">
    </wxlogin>
  </div>
</template>

<script setup>
import wxlogin from 'vue-wxlogin'
</script>

附上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)

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