这篇文章主要讲解了“vue3如何实现微信扫码登录及获取个人信息”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue3如何实现微信扫码登录及获取个人信息”吧！

十余年的望谟网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整望谟建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“望谟网站设计”,“望谟网站推广”以来，每个客户项目都认真落实执行。

一、流程：

微信提供的扫码方式有两种,分别是:

• 跳转二维码扫描页面

• 内嵌式二维码

根据文档我们可以知道关于扫码授权的模式整体流程为:

1. 第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据 code 参数；

2. 通过 code 参数加上 AppID 和AppSecret等，通过 API 换取access_token；

3. 通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。

二、前置条件：

微信开发官网 申请：

appid: ‘’, // 后端提供
redirect_uri: ‘’, // 后端提供
AppSecret // 后端提供

三、具体登录实现

实现方式一：

使用vue插件：

// 安装
npm install vue-wxlogin --save-dev
// js引入
import wxlogin from 'vue-wxlogin'
components: { wxlogin }

使用：

 
 
 
 
//   data

 

//   data
bast64css: 'data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O2hlaWdodDoyMDBweH0NCi5pbXBvd2VyQm94IC5pbmZvIHt3aWR0aDogMjAwcHh9DQouc3RhdHVzX2ljb24ge2Rpc3BsYXk6IG5vbmV9DQouaW1wb3dlckJveCAuc3RhdHVzIHt0ZXh0LWFsaWduOiBjZW50ZXI7fQ0KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lfQ0KaWZyYW1lIHtoZWlnaHQ6IDMyMnB4O30NCg==',
                appid: 'wx64914809da50', // 后端提供
                redirect_uri: 'http%3A%2F%2Flant.com', // 后端提供

结果：这样微信二维码就会显示在自己写的网页上

扫描后，页面的url会给一个带code的地址 ，去获取code

if (window.location.href.indexOf('code') >= 0) {
                let code = window.location.href.split('?')[1];
                code = code.substring(5, code.indexOf('&'));
                this.wechatcode = code
                this.wechatLogin()
            }

把code给后端，后端会返回给你这个人的信息

方式二：

自己集成到自己的网页

1、首先在vue页面添加微信登录按钮：

微信扫码登录

2、配置登录相关参数，跳转微信登录二维码授权页面

// 跳转微信登录二维码授权页面
      handLoginByWx() {
        // 重定向地址重定到当前页面，在路径获取code
        const hrefUrl = window.location.href
        // 判断是否已存在code
        if (!this.code) {
        // 不存在，配置相关微信登录参数（主要是授权页面地址，appID，回调地址）
          window.location.href = `
              https://open.weixin.qq.com/connect/qrconnect
            ?appid=APPID
            &redirect_uri=${encodeURIComponent(hrefUrl)}
            &response_type=code
            &scope=snsapi_login
                    `
        }
      }

3.进行扫码授权确认

手机扫码二维码确认授权

4.回调

由于vue这边有路由守卫，故相关获取回调返回的code值在路由守卫中进行处理

// 为微信授权登录重定向地址服务
      var temp = (to.path).split('&')
      var pram = temp[1]
      var item = pram.split('=')
      var code = item[1]
      // 重定向到微信登录页面并且将code值带上
      next({
        path: '/login',
        query: { 'code': code }
      })

5.登录页监听地址是否存在code

登录页面监听是否获取到微信授权返回的code值，若存在则调用后台提供的接口将code返回给后端
6.根据后端返回的凭证再调用登录接口进行登录

方式三：结合后端获取到二维码

1、添加一个div, 用于显示微信登陆二维码