vue 实现PC端微信扫码登录(二维码内嵌网页版)

本文介绍如何在Vue项目中实现PC端的微信扫码登录功能。首先在index.html引入微信扫码登录的JS文件,然后在登录页面实例化并设置相关参数,如appid、scope、redirect_uri等。扫码后会跳转到指定页面进行登录逻辑处理。
摘要由CSDN通过智能技术生成

1.先在index.html中引入js文件
在这里插入图片描述

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

**

2.在需要的页面进行实例化(本项目是在登录页进行扫码)
在这里插入图片描述

键值说明:
Id: 是存放二维码的容器,
appid: 是开发者在微信开房平台提交申请后,获得appid和一个秘钥
scope: snsapi_login这个是代表网页版
redirect_uri: 这个是扫码后要跳转的页面,这个是要跳转到loginsuccess页面,这个路径要urlEncode转码的,转码地址为(http://tool.phpshuo.com/UrlEncode.html), 注意,要跳转的地址必须在申请的域名下面。
style: 代表二维码的样式,有black和white可选,
href: 修改二维码的样式,要经过base64位转码,地址为(https://the-x.cn/base64/)。

login.vue 页面

<!-- 承载二维码容器 -->
<di
  • 6
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值