点击查看【bilibili】
网站应用微信登录开发指南

第一种方式（打开新地址）

体验地址：http://v4.crmeb.net/login
代码参考地址：https://github.com/xiumubai/shop-code/blob/main/shop-pc/view/pc/pages/login.vue
这种方式会直接打开一个新的页面链接，跳转到扫码登陆页面
image.png

调起这个页面的方式也很简单，只需要拼接一下这个页面链接即可，前提得获取到应用的appid

  1. window.location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=${this.appidNum}&redirect_uri=${this.hosts}&response_type=code&scope=snsapi_login&state=EqMkUDWh8F3euWlt23jHJ8ZJuaTAVPZyiKEoq5U0`;

具体参数见图示：
image.png
当用户在微信端扫码成功以后，会根据redirect_uri自动跳回到原先的登陆页面，这时候原先的登陆页面会携带code，再次回到登陆页面
image.png
从url中拿到code，根据code去后端换取token
image.png
拿到token以后，表示已经登陆成功了。这时候就可以在header中携带着authorization去请求用户信息了。

第二种方式（网站内嵌二维码）

参考文档：https://juejin.cn/post/7080527629639483423
体验网站：http://124.221.233.32:84/login
代码地址：https://gitee.com/cao-hongxiang/wx-saoma/blob/master/src/views/login/wxlogin.vue
这种方式就更加简单粗暴，大概可以分为以下几个步骤

  1. 后端接口实现一个生成二维码的API供浏览器调用，API可通过参数声明需要返回的格式；
  2. 请求公众平台 →【生成带参数的二维码】接口生成带有场景值的二维码，生成成功后记录到数据库并返回；
  3. 浏览器获取二维码信息后轮询二维码的扫描状态；
  4. 用户扫码后，公众平台会向实现的API推送事件，扫描成功后即可登陆获取到用户信息等； ```javascript setInterval(){ var that = this this.interval = setInterval(function(){ that.newandold() },2000) },

async newandold(){ var res = await newandold() console.log(res) if(res.msg == “登录失败”) { clearInterval(this.interval) }else{ this.openid = res.obj.openid if(res.obj.openid){ clearInterval(this.interval) console.log(res,’132132’) if(res.type == 1){ // 说明有账号 登录成功 this.setLoginData(res.data) this.utils.goIndex() this.$message({ type: ‘success’, message: ‘登录成功!’ }); }else if(res.type == 2){ // 说明没有账号 如果有已经注册的账号去绑定,没有就去注册 this.dialogVisible = true } } } }, ```