1.先在index.html中引入js文件
<script src="https://res./connect/zh_CN/htmledition/js/wxLogin.js"></script>
**
2.在需要的页面进行实例化（本项目是在登录页进行扫码）
键值说明：
Id: 是存放二维码的容器，
appid: 是开发者在微信开房平台提交申请后，获得appid和一个秘钥
scope: snsapi_login这个是代表网页版
redirect_uri: 这个是扫码后要跳转的页面，这个是要跳转到loginsuccess页面，这个路径要urlEncode转码的，转码地址为（/UrlEncode.html）, 注意，要跳转的地址必须在申请的域名下面。
style: 代表二维码的样式，有black和white可选，
href: 修改二维码的样式，要经过base64位转码，地址为（https://the-/base64/）。
login.vue 页面<!-- 承载二维码容器 --><div class="wx_dialog_toiast_delltet" id="login_container"></div><div class="wx_dialog_button_delete" @click="close_wchat_qrcode"><i class="el-icon-close" style="font-size: 26px"></i></div></div> <script>data(){return{ Wechat_authorized_login:false,}},mounted () {this.get_wx_qrcode(); //获取微信的登录二维码},methods:{//点击微信登陆wechatLogin(){this.Wechat_authorized_login = true},get_wx_qrcode(){//从微信的开发文档不难看出回调域名需要经过encodeURIComponent处理var obj = new WxLogin({self_redirect: false, //值为true时，直接在二维码的弹窗中进行页面跳转及其余操作,id: "login_container", //需要承载二维码的容器id appid: "你的appid",scope: "snsapi_login",//网页授权，目前网页只有这一种方式，静默授权redirect_uri: encodeURIComponent('http:/******/loginSuccess'),//回调域名(地址前部分是项目域名，后部分loginSuccess是微信需要跳转的路径（vue中的路由名称）)state: Math.random(),style: "white",href: "",});},close_wchat_qrcode(){this.Wechat_authorized_login = false;this.get_wx_qrcode();}}</script><style lang="scss" scoped>.wx_dialog_toiast {position: fixed;top: 0px;left: 0px;width: 100%;height: 100%;z-index: 9854647;background: rgba($color: #000000, $alpha: 0.5);display: flex;justify-content: center;align-items: center;.wx_dialog_toiast_delltet {width: 500px;height: 500px;background: #606266;display: flex;justify-content: center;align-items: center;}.wx_dialog_button_delete {position: absolute;right: 0px;top: 0px;height: 100px;width: 100px;display: flex;justify-content: center;align-items: center;}}</style>
3.中间页中进行登录逻辑操作
loginSuccess.vue<template lang=""><div></div></template><script>import { pcLoginByWeiXin } from "@/api/registered";export default {//inject: ["reload"],data(){return{dataParms:{code:''},}},// 因为是在当前页面添加code的，界面没有刷新，只是添加参数，所以就必须监测路由参数的变化watch: {$route(){if(this.$route.query.code!=undefined){this.getWeixin(this.$route.query.code,this.$route.query.state);}}},// js代码created () {this.dataParms.code = this.getUrlKey("code");console.log('code',this.dataParms.code)this.getWeixin();},methods: {// 公共方法getUrlKey (name) {return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [",",""])[1].replace(/\+/g, '%20')) || null;},// 通过code获取微信信息getWeixin(){//调用接口，将code传给后端pcLoginByWeiXin(this.dataParms).then((res) => {console.log('+++++++',res)if (res.data.code == 0) {localStorage.setItem('openId', res.data.data.openId); // openId存入缓存localStorage.setItem('token', res.data.data.token); // userToken存入缓存window.location.href = "/"}else if(res.data.code == 30){localStorage.setItem('openId', res.data.message);this.open();}else {this.$message.error(res.data.message);window.location.href = "/login"}});},open() {this.$confirm('暂无用户，请选择注册或绑定手机号', '提示', {confirmButtonText: '注册',cancelButtonText: '绑定',type: 'warning'}).then(() => {this.$router.push({path:'/registered'})}).catch(() => {this.$router.push({path:'/wxBind'})});}}}</script>
如果觉得《vue 实现PC端微信扫码登录（二维码内嵌网页版）》对你有帮助，请点赞、收藏，并留下你的观点哦！
