pc端网站使用微信登录全流程
1.在index.html页面引用微信地址
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js" type="text/javascript"></script>2.在页面使用
<!-- 登录二维码 --> <div id="qrcode_img"> </div> methods: { async getQrcodeImg() { // 如果显示二维码的元素外面有v-if就要用this.$nextTick this.$nextTick(() => { const url = encodeURIComponent('https://xxxxo.com/#/wechat') // 你要重定向的页面地址 // 创建实例对象 let obj = new WxLogin({ self_redirect: false, // 通过这个实例对象生成的二维码显示在一个iframe中，这个字段的意思是 当用户同意授权后是否在生成二维码的iframe中跳转到重定向的地址 id: 'qrcode_img', // 显示二维码的容器id 注意是id不是class appid: 'wxxxxxxxx9301', //你的APPID scope: 'snsapi_login', // 应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可 redirect_uri: url, // 重定向的地址 state: 'STATE', // 用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验 style: 'black', // 提供"black"、"white"可选，默认为黑色文字描述。黑字的时候就是白色的底色 白字就是黑色的底色 // href: '', // 自定义样式链接，第三方可根据实际需求覆盖默认样式，stylelite不为1时有效。 stylelite: 1, // 换二维码登录样式，值为1时二维码登录将切换到新样式。值为1时就只有一个二维码 样式比较简单 根据项目实际情况适用 onReady: function (isReady) { // iframe页面是否加载成功的回调，isReady为true表示加载成功 console.log('onReady>>>', isReady) } }) }) }, } <style> #qrcode_img { height: 120px; } </style>需注意，在使用该方法需满足
1.微信开放平台已经创建好了 “网站应用” ,不是公众号、小程序，一定要是网站应用
地址：https://open.weixin.qq.com/cgi-bin/index?t=home/index
2.复制注册好的网站应用APPID
3.额外确认：redirect_uri 域名和开放平台配置一致（避免报 redirect_uri 错）
3.额外确认：redirect_uri 域名和开放平台配置一致（避免报 redirect_uri 错）
3.额外确认：redirect_uri 域名和开放平台配置一致（避免报 redirect_uri 错）
重要事情说三遍
网站应用审核也通过后，调用的方法即可生效
最终效果：