记一次微信扫码登陆pc系统的开发过程

前言

最近leader给了我一个需求，让我微信扫码登陆咱们的pc系统。一开始拿到这个需求，看了二三次微信官方文档以后，本觉得会很简单，半天以内就能搞定。直接奥利给，撸代码。结果啪啪啪打脸，把全部的坑都踩过了。不过幸不辱命，仍是把这个需求写完了。

1:准备工做

网站应用微信登陆是基于OAuth2.0协议标准构建的微信OAuth2.0受权登陆系统。 在进行微信OAuth2.0受权登陆接入以前，在微信开放平台注册开发者账号，并拥有一个已审核经过的网站应用，并得到相应的AppID和AppSecret，申请微信登陆且经过审核后，可开始接入流程。审核大概要一周时间外加300rmb。微信官方文档

2:整理思路

审核经过以后整理整个需求思路。大概画了这样一个流程图。

3:所踩的坑

1.外链连接报错的问题

因为咱们当时没没定是内嵌仍是外链二维码，因此当时第一种尝试方案就是外链二维码扫码登陆。当时是请求后端接口拿到这个二维码地址。点击这个地址发现Scope 参数错误或没有 Scope 权限结果查看文档发现后端返回的redirect_uri没有进行UrlEncode处理。先后端必定得多看几遍文档!!!!!
当时拿到二维码连接的时候，一直想要经过img标签把二维码显示出来，试了不行，用iframe试了行是可行。可是样式不对。而后二维码样式直接覆盖也没有用。以后又试了qrcode插件，二维码样式是对了可是扫码以后结果却不是这样的。哎。一言难尽啊！
2.内嵌二维码样式显示
根据官方文档引入JS文件

<script type="text/javascript" src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
其实这个js也是经过iframe来加载二维码的，以后微信登陆的时候引入对象。

var obj = new WxLogin({
      id: 'login_container', // 须要显示的容器id
      appid: '************', // appid 
      scope: 'snsapi_login', // 网页默认便可
      redirect_uri: redirectUrl, // 受权成功后回调的url
      state: dayjs().unix(),// 用来校验
      style: 'black', // 二维码的样式
      href: 'https://******/qrcode.css' // 外部css文件url，须要https
    })

注意这个redirect_uri必定要写对，否则二维码显示不出来，若是发现二维码过大或者你不想要的样式，你能够在href填入一个连接。用其中的样式覆盖。

.loginPanel normalPanel {display: flex;}
.impowerBox .qrcode {width: 200px;}
.impowerBox .title {display: none;}
.impowerBox .info {width: 200px;}
.status_icon {display: none}
.impowerBox .status {text-align: center;}

最终效果：

大功告成，虽然结果出来了，可是过程倒是一波三折。

总结

本人19年毕业的，从事前端开发也有9个月了，加上实习的话都一年多了。
但愿本身不要盲目自信，多总结经验，多沉淀本身的技术。多向大佬学习。另外码字不容易，但愿你们点个赞。前端路漫漫，与君共勉之。