Vue3 网站应用实现微信扫码登录功能
主要思路是调用接口获取重定向地址,并且需要进行UrlEncode,如果是内嵌在自己应用内,需要在页面上准备一个容器放置二维码。扫码后会跳转到重定向地址,此时路由会多几个参数,只需要监听路由参数的变化并触发对应方法即可。可参考官方文档
下面是内置的方法
步骤1:在index.html文件内引入JS文件(微信提供)
<body> <div id="app"></div> <script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> </body>
步骤2:在需要使用微信登录的地方实例以下JS对象:
const wechatLogin = () => { nextTick(async () => { //调用后台接口获取重定向地址,因人而异 const {code, data} = await getRedirectUrl() const url = new URLSearchParams(data) if (code === 0) { //@ts-ignore new WxLogin({ self_redirect: false, id: "login_container", //放置二维码的容器ID appid: "your_appId", scope: "snsapi_login", redirect_uri: encodeURIComponent(url.get('redirect_uri')!), //编码重定向地址 state: url.get('state'),//重定向地址后台返回的state style: "", href: "" }); } }) }
最后监听路由参数的变化,调用登录方法,登录需要的参数都在路由里面参数里面,传给后端即可实现登录。
watch(() => route.query, (val) => { if (val.code && val.state) { handleWxLogin() } })