Vue3 微信登录

Vue3 微信登录

在做登录前需要去微信开发平台申请认证，然后拿到APPID，并且设置回调地址

一、引用微信jsdk

 <script type="text/javascript" src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

二、登录页面

get_wx_qrcode() {
            //从微信的开发文档不难看出回调域名需要经过encodeURIComponent处理
            var obj = new WxLogin({
                self_redirect: false,  //值为true时，直接在二维码的弹窗中进行页面跳转及其余操作,
                id: "login_container",       //需要承载二维码的容器id  
                appid: "xxxxx",//微信平台appid  
                scope: "snsapi_login",     //网页授权，目前网页只有这一种方式，静默授权
                redirect_uri: encodeURIComponent('xxxxxx'),     //回调域名(地址前部分是项目域名，后部分loginSuccess是微信需要跳转的路径（vue中的路由名称）)
                state: Math.random(),
                style: "white",
                href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDI4MHB4OyBoZWlnaHQ6IDI4MHB4O30KLmltcG93ZXJCb3ggLnRpdGxle2Rpc3BsYXk6IG5vbmU7fQouaW1wb3dlckJveCAuaW5mb3tkaXNwbGF5OiBub25lO30K"
            });
        },

三、把节点挂载到页面上

//显示二维码
<div id="login_container"></div>
//点击显示二维码
<img @click="get_wx_qrcode" src="xxx/file/static/WX.png" />

四、最终显示效果

)