vue3 封装微信二维码登录、绑定功能模块

需求场景

作为前端经常会开发网站扫二维码登录功能，目前开发的逻辑有两种，一种是公众号或小程序登录，一种是微信开放平台登录。

设计方案

微信关注公众号登录步骤：

1、生成特定的推送链接，或者临时的二维码码图

2、展示二维码，开启定时器，轮询特定的接口。当扫码后关注公众号或扫描二维码，轮询接口返回对应的是否登录

3、通过轮询接口返回的数据，进行微信登录或者绑定微信的操作。

在这里为了更方便的使用，直接将生成二维码的功能模块进行了封装。

代码实施

#安装依赖，动态生成二维码
npm install  qrcodejs2 --save

<template>
  <div class="ercodeBox">
    <div style="width:250px;height:250px;margin: 0  auto;background:#D8D8D8;" ref="qrCodeUrl">
      
    </div>
    <div class="ercode">{{ props.title }}</div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, defineExpose, defineProps,defineEmits, inject } from 'vue';
import defHttp from "@/utils/http.js";
import QRCode from 'qrcodejs2'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue';
const router = useRouter()
const emit = defineEmits(['callback'])
const props = defineProps(['title', 'type'])

const wxConfig = ref({
  wxAppid: '',
  url: '',
  ercode: '',
  scene_str: '',
  intval: '',
  type: 0,
  redirectUrl: 'https://xxxxx.xxx.com'
})
const qrCodeUrl = ref()
const tmessage = inject('tmessage')

const initData = (type) => {
  wxConfig.value.intval = null
  wxConfig.value.type = type
  getWxQrCode()
}
//清理定时器
const initClose = () => {
  clearInterval(wxConfig.value.intval)
}
//轮询登录接口，登录成功之后，清理定时器
const wxLogin = () => {
  defHttp.post('轮询登录接口', { scene_str: wxConfig.value.scene_str }).then(data => {
    if (data.Success) {
      clearInterval(wxConfig.value.intval)
      updateToken(data.Data.role, data.Data.token)
    }
  })
}
//轮询绑定二维码接口，绑定之后，清理定时器
const saveWeChat = () => {
    defHttp.post('轮询绑定接口', { scene_str: wxConfig.value.scene_str }).then(data => {
      if (data.Success) {
        clearInterval(wxConfig.value.intval)
        tmessage.getBaseInfo()
        emit('callback')
      }
    })
}
//获取二维码
const getWxQrCode = () => {
  defHttp.get('获取二维推送链接或者临时的二维码接口', {}).then(data => {
    if (data.Success) {
      wxConfig.value.url = data.Data.url
      wxConfig.value.scene_str = data.Data.scene_str

      creatQrCode()
      if (wxConfig.value.type == 1) {
        wxConfig.value.intval = setInterval(saveWeChat, 2000)
      } else {
        wxConfig.value.intval = setInterval(wxLogin, 2000)
      }

    } else {
      message.error(`${data.Message}`)
    }
  })
}
//展示二维码，将链接转化成二维码；如果是临时的二维码，可以省略这一步
const creatQrCode = () => {
  //每次重新生成前，清空原来div的子元素
  qrCodeUrl.value.innerHTML = ''
  new QRCode(qrCodeUrl.value, {
    text: wxConfig.value.url, // 需要转换为二维码的内容
    width: 250,//和div的宽度保持一致
    height: 250,//和div的高度保持一致
    colorDark: '#000000',
    colorLight: '#ffffff',
    correctLevel: QRCode.CorrectLevel.H
  })
}

const updateToken = (role, token) => {
  localStorage.setItem('token-smartvg-teacher', token)
}
//暴露初始方法和清理定时器的方法
defineExpose({
  initData,
  initClose
})

</script>
<style lang="less" scoped>
.ercodeBox {
  padding: 20px;

  .ercode {
    font-family: Source Han Sans;
    font-size: 24px;
    color: #333333;
    text-align: center;
    margin-top: 32px;
  }
}
</style>

写作目的

写即思。每天工作的过程中会处理很多的问题，而写是了将处理过的问题进行回顾，将成功的经验固化，形成成果。