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" />
四、最终显示效果
)