PC微信扫码登录 – 总结

需求：

准备流程

一、微信开放平台账户申请

网址：微信开放平台

首先我们要做的就是进入到微信开放平台申请一个开放平台账户

申请账号以及最后拿到appId和appSecret

使用接入 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。

1、做什么效果？

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