vue项目PC端页面内嵌微信扫码登录

根据需求需要内嵌一个微信扫码登录获取用户信息

参考准备工作 | 微信开放文档

1 创建微信二维码盒子

<div id="weichat" v-else></div>

 因为一些参数是直接调接口得到的所以这个data就是接口返回的数据

// 获取微信二维码
    GET_weixin(data) {
      console.log(data);
      let href =
        "data:text/css;base64,aWZyYW1lewp3aWR0aDogMzAwcHg7CmhlaWdodDogMzAwcHg7Cm1hcmdpbjogMCBhdXRvOwp9Ci5pbXBvd2VyQm94IC5xcmNvZGV7CiAgd2lkdGg6IDE3MHB4ICFpbXBvcnRhbnQ7Cn0K";
      let obj = new WxLogin({
        self_redirect: false,
        id: "weichat",
        appid: data.appid,
        scope: "snsapi_login",
        redirect_uri: decodeURIComponent(data.redirectUri),
        state: "data.state",
        style: "black",
        href: href,
      });
    },

如果想自定义微信二维码的样式的话可以使用href参数，这个参数是一个链接，是需要base64加密，在线加密地址：https://tool.oschina.net/encrypt?type=3

注意密文前要添加  data:text/css;base64

 

二维码出来后就要获取token根据token获取用户信息了。

这里需要注意的是获取token是根据回调地址中的参数code然后传给后端进行获取的。这里的回调地址必须是当前项目的页面，这样才能得到code参数，而且回调地址必须是外网可以访问且要和微信配置中的回调地址一致，所以联调测试时需要部署到线上进行测试。

只需要监听路由判断路由中是否有code

 watch: {
    $route: {
      handler: function (route) {
        if (route.query.code) {
          this.getToken(route.query);
        }
        if (route.query.loginType) {
          this.loginType = route.query.loginType;
          this.bindPhone = route.query.bindPhone;
        }
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },

然后传给后端接口，的到后端返回的用户信息即可。

<template>
  <div>
    <div class="preloader">
      <div class="loader">
        <div class="ytp-spinner">
          <div class="ytp-spinner-container">
            <div class="ytp-spinner-rotator">
              <div class="ytp-spinner-left">
                <div class="ytp-spinner-circle"></div>
              </div>
              <div class="ytp-spinner-right">
                <div class="ytp-spinner-circle"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--====== PRELOADER PART ENDS ======-->

    <!--====== HEADER PART START ======-->

    <banner></banner>
    <section
      class="px-5 py-8 py-xxl-20 background-position-center background-size-cover bsb-overlay bsb-hover-pull bg"
    >
      <div class="container">
        <div class="row justify-content-md-center">
          <div
            class="col-12 col-md-11 col-lg-9 col-xl-7 col-xxl-6 text-center text-white"
          >
            <h1 class="display-3 fw-bold mb-5 text-white">注册 / 登录</h1>
            <!-- <p class="lead mb-5 text-white">I am an experienced UX/UI Designer with a strong background in developing award-winning applications.</p> -->
          </div>
        </div>
      </div>
    </section>
    <!--====== HEADER PART ENDS ======-->
    <div class="shop-wrapper fluid-padding-2 pt-120 pb-150">
      <div class="container">
        <div class="login-register-area ptb-130">
          <div class="container">
            <div class="row justify-content-center">
              <div class="col-lg-7 ms-auto me-auto">
                <div class="login-register-wrapper">
                  <div class="login-register-tab-list nav">
                    <a class="active" data-bs-toggle="tab" href="#lg1">