随着微信用户的大量普及，对接微信的开发需求也在日益增长，这就对前端开发人员有了更高的要求，不仅需要掌握H5页面的基本开发、适配等内容，也需要对微信开发以及与页面基本的对接有较为深入的了解。本篇文章通过在开发过程中遇到的部分问题，详细阐述了PC端对接微信扫码登陆基本实现方法。
授权流程说明
微信OAuth2.0授权登录让微信用户使用微信身份安全登录第三方应用或网站，在微信用户授权登录已接入微信OAuth2.0的第三方应用后，第三方可以获取到用户的接口调用凭证（access_token），通过access_token可以进行微信开放平台授权关系接口调用，从而可实现获取微信用户基本开放信息和帮助用户实现基础开放功能。微信OAuth2.0授权登录目前支持authorization_code模式，适用于拥有server端的应用授权。该模式整体流程为：
- 第三方发起微信授权登录请求，微信用户允许授权第三方应用后，微信会拉起应用或重定向到第三方网站，并且带上授权临时票据code参数；
- 通过code参数及AppID和AppSecret，通过API换取access_token；
- 通过access_token进行接口调用，获取用户基本数据资源或帮助用户实现基本操作。
准备工作
网站应用微信登录是基于OAuth2.0协议标准构建的微信OAuth2.0授权登录系统。在进行微信OAuth2.0授权登录接入之前，在微信开放平台注册开发者帐号，并拥有一个已审核通过的网站应用，如下图所示，并获得相应的AppID和AppSecret，申请微信登录且通过审核后，可开始接入流程。
使用vue-wxlogin依赖进行开发
（1）安装依赖
npm install vue-wxlogin --save-dev
（2）页面引入并注册
（3）指定位置使用
编写二维码容器弹框
使用vue-wxlogin依赖包生成微信登陆二维码
关于vue-wxlogin各个参数配置如下表格所示：
（4）实现效果如下
当点击同意之后，网站就会重定向一个链接，这个code的值是后端给的，前端监听路由变化，就可以拿到code，通过接口就可以获取到微信信息，从而实现微信授权登录。
总结
本文对PC端对接微信扫码登陆实现做了较为详细的阐述，让大家对其有一个简单的认识。总之关于微信的开发是一项较为复杂的工作，牵涉到的各种对接流程也较多，同时会涉及到各种适配问题，今后若遇到类似问题，可以一起学习讨论，共同进步。
