前言最近领导给我一个微信扫码登录我们PC系统的请求。当初拿到这个需求的时候，看了两三遍微信官方文档，觉得会很简单，半天就能搞定。只需将它交给Ollie并阅读代码即可。结果，他打脸，把坑都踩了。不过庆幸的是，还是把这个需求写完了。1：准备工作网站申请微信登录是基于OAuth2.0协议标准的微信OAuth2.0授权登录系统。在进行微信OAuth2.0授权登录接入之前，先在微信开放平台注册一个开发者账号，并有一个经过审核的网站申请，并获取对应的AppID和AppSecret。申请微信登录并通过审核后，即可开始接收流程。审稿大概一周加300rmb。微信官方文档2：思路审核通过后整理整个需求思路。大概画了这么一张流程图。三：你踩过的坑1.外链报错问题由于我们不确定是内嵌二维码还是外链二维码，当时我们尝试的第一个方案是扫描外链二维码登录。当时请求后台接口获取二维码地址。点击这个地址发现Scope参数不对或者没有Scope权限。查看文档后发现，后台返回的redirect_uri没有经过UrlEncoded处理。前后端一定要多看几遍文档！！！！拿到二维码链接的时候，一直想通过img标签显示二维码。我试过了，但没用。我用iframe试了一下，效果很好。但是风格不对。那么直接覆盖二维码样式是没有用的。之后又尝试了一下二维码插件。二维码样式是对的，但是扫码后结果不一样。为什么。很难说！2.内嵌二维码样式展示根据官方文档导入JS文件其实这个js也是通过iframe加载二维码，然后在登录微信的时候导入对象。varobj=newWxLogin({id:'login_container',//要显示的容器idappid:'************',//appidscope:'snsapi_login',//网页default可以redirect_uri:redirectUrl,//授权成功后回调的urlstate:dayjs().unix(),//用于验证style:'black',//二维码的样式href:'https://*****/qrcode.css'//外部css文件url，需要https})注意redirect_uri一定要写对，否则二维码不会显示，如果你发现二维码太大或者你不想要它的样式，你可以在href中填写一个链接。覆盖其中的样式。.loginPanelnormalPanel{display:flex;}.impowerBox.qrcode{width:200px;}.impowerBox.title{display:none;}.impowerBox.info{width:200px;}.status_icon{display:none}.impowerBox.status{text-align:center;}最终效果：大功告成，虽然结果出来了，但是过程一波三折。总结一下，本人2019年毕业，从事前端开发9个月，加上实习的话一年多了。希望自己不要盲目自信，多总结经验，多积累技巧。多向大佬学习。另外，码字不易，希望大家喜欢。路漫漫其修远兮，我们一起加油。
