Vue3+ 如何实现微信扫码登录（内嵌）

vue版本：3.3.4

样式展示：

前置准备：

1、微信开放平台申请应用appid；
2、应用配置回调域名；也就是需要需要使用扫码登录页面的地址（***重要***）

上代码：

JS：

const onLoginTypeChange = () => {
  setTimeout(() => {
    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 () {
      // @ts-ignore
      const obj = new WxLogin({
        id: 'scan', // 需要显示的容器id
        appid: '', // 公众号appid wx*******
        scope: 'snsapi_login', // 网页默认即可
        redirect_uri: encodeURIComponent(''), // 授权成功后回调的url
        state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
        style: 'black', // 提供"black"、"white"可选。二维码的样式
        href: 'https://www.baidu.com/pcScan.css' // 外部css文件url，需要https
      })
    }
  }, 200)
}

HTML：

 <div id="scan" class="h-52 flex justify-center overflow-hidden" @click="onLoginTypeChange"></div>
 

说明：

1、setTimeout 200是因为我这个是切换的时候才开始渲染生成script标签。200ms防止标签还未生成完毕，如果是一进入页面就展示二维码，可以放在onMounted里，无需setTimeout
2、怎么自定义样式；首先需要本地创建一个css文件，审查iframe里的样式，修改；然后将css文件放置服务器中，获得cdn地址；将其配置在href上即可；

二维码样式自定义：

最终效果：

扫码完成后跳转到配置的redirect_uri地址，同时会携带code以及我们自定义的state;code可以传给后端去获取openid等信息。

收工！