网页微信扫码登入

有两种处理方式
一种是后端去处理微信登入 我们只需要他的网页链接用来打开小窗口，可以用接口的形式去获取这个wx的网页扫码链接 这个链接我们用window.open 去打开这个链接就行了

可以做个判断  如果已经wx扫码弹框了 就关闭弹框重新开一个if (this.newWindow != null) {this.newWindow.close();}

   webWx(obj).then((res) => {let url = res.data;const screenWidth = window.screen.width;const screenHeight = window.screen.height;const width = 600;const height = 600;const left = (screenWidth - width) / 2;const top = (screenHeight - height) / 2;const target = "_blank";const features = `width=${width},height=${height},left=${left},top=${top}`;this.newWindow = window.open(url, target, features);// 这里就可以监听小窗口里  是否有传值给我们window.addEventListener("message", this.listenerMessageFn);});

设置小窗口居中 扫码成功后小窗口里 后端需要返回一个html页面 这个html页面的功能只有一个 就是跳转到我们用来接收后台消息的页面，并且把需要回填的数据放在地址栏里 我们自己去接收

//  后端返回的html页面会跳转到我们这个前端的页面 比如页面名就叫wxLogin 页 
//  去接收后端给我们的参数值
// 然后把数据用postMessage传给login页  只能是同源的页面才可以传值  同一个前缀地址名
<template><div>wxlogin</div>
</template><script>
export default {mounted(){let obj = {status:this.$route.query.status,token:this.$route.query.oken,result:this.$route.query.result}let url const isProduction = process.env.NODE_ENV === 'production'if(isProduction){url = window.location.origin}else{url = 'http://192.168.0.xxx:80xx'}window.opener.postMessage(obj, url +'/login');}
}

 listenerMessageFn(event) {// 确保数据来自于窗口扫码页面if (event.source === this.newWindow) {const data = event.data; // 扫码页面发送的数据// 关闭扫码页面this.newWindow.close();if (data.result) {//  result值 是json字符串这个也是后端传给我们的  根据里面的值去做登入的操作let result = JSON.parse(data.result)}if (data.status == "0") {// 失败状态 需要注册绑定微信 显示绑定页面this.isShowWxRegister = true;ELEMENT.Message.warning("微信未绑定,请绑定微信");// 不管失败还是成功  都要取消监听 window.removeEventListener("message", this.listenerMessageFn);} else if (data.status == "1") {// 成功状态window.removeEventListener("message", this.listenerMessageFn);setToken(data.hycooby_token);this.$store.commit("user/SET_TOKEN", data.hycooby_token);this.$store.commit("user/SET_LOGIN_STATUS", true);this.$store.commit("userdata/SET_TIMEZONE");this.$router.push("/teacher");ELEMENT.Message.success("登入成功");}}},

第二种 就是 前端来做微信登入 这个可以嵌入到页面中 就是提供一个div 里面就是wx去添加一个ifname

https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html
这个是官网的地址
里面有具体的操作

引入 wx的 sdk
http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

实例化 具体的参数 还需去官网查询  bilibili上也有好多这样的视频  是前端去实现微信二维码登入var obj = new WxLogin({self_redirect:true,id:"login_container", appid: "", scope: "", redirect_uri: "",state: "",style: "",href: ""});

redirect_uri 就是你要跳转的地址 是wx去做跳转的操作 扫码完成后，跳回来的链接上会带上code
一般来说 收到code 后 就请求自己的接口 用这个code 传给后端 后端在返回token 然后登入页面

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！