一定要看的修改微信扫码登录鉴权样式的大坑

一定要看的修改微信扫码登录鉴权的样式的大坑

在接入第三方微信鉴权时踩了很多坑，由于之前没有做过，查询的信息也不够，所以在这里总结一下

一、引入微信扫码登录鉴权

如何引入实现微信扫码登录鉴权很简单：js引入-初始化对象
在这里需要去申请对应的域名和id，这个过程需要审核，需要提前申请，具体可以参考微信开放平台的使用文档【微信扫码鉴权官方开放文档教程】

---

二、修改微信扫码登录鉴权的样式

这里使用的是文档中介绍到的base64编码后添加在href后面，如下图

完整的详细步骤如下>

• 第一步：写好要修改的样式

• 第二步：压缩成base64的格式

  • 这里推荐一个工具地址base64压缩地址
    – 下图中左边输入修改的css，点击base64编码会生成右边编译后的字段，复制下来
    

这里有个问题，在获取到编译后的字段后，会出现拿不到css文件的问题，就像下面这个图一样

经过对比会发现控制台返回的这段base64编译字段和我们从工具处复制的不一样，这是浏览器自己解析时将一些关键字直接解析了，以至于根本拿不到正确的文件


因此我们需要用encodeURIComponent编译一下再用模版字符串拼接后塞到href里面

• 第三步：写css样式

  • 打开控制台，选择需要修改样式的classname或者id去修改
    
  • 遇到无法选中添加样式的classname，可以选择隐藏这个元素，通过::after和::before来添加伪元素实现

在修改样式遇到最大的坑就是编译成base64后没想到浏览器解析时会和原来的字符不一样，没有去对比两个字段耽误了很多时间，在这里记录一下以后做鉴权可以参考