简单易懂，一步步教你用微信扫二维码登录

最近做的需求涉及到了PC微信扫码登录，现在需求做完了总结一下这个开发过程中遇到的问题，附上微信官方文档辅助理解 ???? 微信登录

1、做什么效果？

• 页面弹框中放二维码
• 微信扫描授权成功后打开一个新标签页

2、约定的方案

• 调用后端接口获得微信登录二维码
• 扫描成功之后，后端返回js脚本执行前端定义好的方法

PC微信扫码登录的实现

使用接入 SDK 的方式来将二维码嵌入到页面中

<!-- 1、首先页面接入wxloginjs -->
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>

<!-- 2、通过实例对象的方法，将二维码页面嵌入到本地页面中希望的位置 -->

<!-- 放二维码的容器 -->
<div id="wechat-login"/>

<script>
    // 创建微信登录的对象
    new WxLogin({
        self_redirect: true, // 是否在iframe内跳转 redirect_uri
        id: 'wechat-login', // 希望二维码嵌入容器的 id
        appid: 'appid',
        scope: 'snsapi_login',
        redirect_uri: '扫码成功后跳转的地址',
        href:    'data:text/css;base64,LmxvZ2luUGFuZWwubm9ybWFsUGFuZWwgLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5xcmNvZGUubGlnaHRCb3JkZXIgew0KICB3aWR0aDogMjAwcHg7DQogIGhlaWdodDogMjAwcHg7DQp9DQo=',
    })
</script>

• ???? 这里需要说一下，redirect_uri就是微信扫码成功后跳转的地址，那为什么约定的方案还要给后端我们定义好的 js 脚本呢？因为希望微信扫码之后的动作是前端来控制的（包括成功后关闭弹窗，打开新页签这些动作）

遇到的问题

1、href: 自定义样式链接，第三方可根据实际需求覆盖默认样式。但是实际引入项目中写好的样式文件没有生效，文档里没有仔细说，直到我翻到了一行小字：觉得默认二维码过大，可以提供相关css样式文件，并把链接地址填入href字段（注意 ： 是链接地址，必须是公网地址），研究了一通发现 href 除了放链接还可以将写好的样式文件进行 base64 转码，像????代码中一样也可以实现修改二维码的样式。上面是主要参数，还有更多参数可以参考微信官方文档

2、postMessage: 嵌在页面上的二维码其实是一个iframe，那当扫描成功之后，后端是在这个 redirect_uri 页面返回的 js 脚本，也就是在 iframe 里面来执行我们提供的脚本，实现和父窗口的通信就需要使用到 postMessage。

// 给后端提供的脚本
(function () {
    window.parent.postMessage({ msg: 'success' }, '*') 
})()

// 接收message
window.addEventListener('message', function(event) {
    // 拿到event做对应的操作
}, false)