pc端微信扫码登录，内嵌版

官方文档

https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

贴代码

【index.html】引入wx文件
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>


【微信登录页面】

<div class="qrcode-img" id="qrcode-img"></div>  //二维码dom容器


//引入转base64方法（详情查看 https://www.cnblogs.com/huihuihero/p/17210366.html）
import { handleBase64 } from "@/utils/data-handle/handleBase64.js"  


// 微信二维码样式
        const qrcodeStyle = `
            .impowerBox .wrp_code {
                border: 1px solid #EEEEEE;
                border-radius: 4px;
                margin: 0 auto;
                width: 160px;
                height: 160px;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .impowerBox .qrcode {
                width: 150px;
                border: 0;
                margin-top: 0;
            }
            .impowerBox .title {
                display: none;
            }
            .impowerBox .info {
                margin-top: 10px;
            }
            .status_icon {
                display: none!important;
            }
            .impowerBox .status {
                text-align: center;
                padding: 0;
            }
        `

        // 创建微信二维码
        function createWxQrcode() {
            nextTick(() => {
                let href = `data:text/css;base64,${handleBase64.encode(qrcodeStyle)}`
                let obj = new WxLogin({
                    self_redirect: false,  //扫码后回调地址打开方式，false-新标签页打开，true-当前二维码容器载体内打开
                    id: "qrcode-img",  //二维码容器
                    appid: "wx1b9exxxxxx1ee891",  //应用唯一标识
                    scope: "snsapi_login",  //作用域，pc扫码固定此写法
                    redirect_uri: encodeURIComponent("https://login.xxx.com/wxloginpc"),  //配置自己申请的回调地址
                    state: "kPdnyUxxxnGWQEFGD8N",  //参考官方文档
                    style: 'black',  //参考官方文档
                    href: href, // 二维码样式，这里可填：css文件链接或者转化为base64格式的css样式文本
                })

            })
        }

onMounted(()=>{
    document.getElementById("qrcode-img").innerHTML=''  //先清空之前生成的二维码
    createWxQrcode()
  })