vue 微信扫码登录嵌入方式及开发踩的坑点

1. 微信扫码登录开发文档

首先仔细阅读 微信扫码登录开发文档

微信扫码登录比钉钉扫码登录坑稍微多一点，但是也最终必将其解决。可以看下我的钉钉扫码登录流程 vue 钉钉授权第三方WEB网站扫码登录功能

申请AppID，AppSecret，配置回调地址

登录微信开发平台 --> 管理中心 --> 网站应用，点击查看 查看申请的信息

AppID，AppSecret

配置回调地址 不要http！！！

2. 微信扫码登录方式

扫码登录有两种方式：

①：跳转到大黑屏界面进行扫码登录，像京东，知乎这种大型网站都是采用的这种方式

②：把微信登录二维码嵌入到网页中进行登录。这样可以自定义一些样式，例如二维码的大小、是否有标题等，下面是嵌入式的效果如下，~~~~这种效果比较符合设计的需求一点。

3. 微信扫码登录代码

<template>
  <div>
    <div id="wx_login_container" style="height: 300px"></div>
  </div>
</template>
<script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script>
export default {
  data() {
    return {}
  },
  methods: {
    get_wx_qrcode() {
      //从微信的开发文档不难看出回调域名需要经过encodeURIComponent处理
      var obj = new WxLogin({
        self_redirect: false,//扫码后默认重新打开的回调地址，不是当前页打开
        id: 'wx_login_container',
        appid: 'wxe19e3e2415exxxxx',
        scope: 'snsapi_login',
        redirect_uri: encodeURIComponent(
          'http://www.baoxiu.cn/#/bindAccount'//配置自己申请的回调地址
        ),
        state: Math.ceil(Math.random() * 1000),
        style: 'black',
        href:'',
    }
  },
  mounted() {
    this.get_wx_qrcode() //获取微信的登录二维码
  }
}
</script>

<style lang="scss" scoped>
.wx_login_container {
  height: 300px;
}
</style>

官方文档字段说明

用户同意和拒绝效果

4. 使用 href 更改内嵌的样式

内嵌默认效果是这样的，如果不想要标题，或者把设置二维码的大小样式，可以通过href去设置

思路就是把如下的样式，通过base64加密放到href参数中。 base64 转换的地址

.impowerBox .qrcode {width: 240px;margin-top:25px;border:0}
.impowerBox .title {display: none;}
.impowerBox .info {width: 240px;}
.status_icon {display:none}
.impowerBox .status {text-align: center;padding:0}
.impowerBox .info{margin: -10px auto}

代码截图，通过href设置去控制内嵌的微信登录二维码的样式。

---

5. 坑点1：redirect_uri 参数错误

导致这种问题的原因就是后台配置的回调地址和前端的 redirect_uri 存在问题。

解决方案：

① ：在开放平台设置好回调地址，例如地址是 www.baoxiu.cn 那么在生成二维码的时候回调只能写该域名下的地址（如：http://www.baoxiu.cn/#/bindAccount）
②：在申请二维码页面回调地址(你的redirect_uri) 还必须加上http或者https，还必须进行转码操作
使用encodeURIComponent进行转码。或者你去其他转码网站转好，复制上去

redirect_uri: encodeURIComponent('http://www.baoxiu.cn/#/bindAccount'),

③：还有回调地址不能跟端口号 如：http://www.baoxiu.cn:80/callback 这样是不行的

---

6. 坑点2：测试环境没有域名，只有ip情况测试扫码登录

很多小伙伴申请了 appid 一般都会有一个域名去配置回调域名，因为申请appid是需要网站备案的。但是部分小伙伴测试是没有申请域名。但是测试扫码登录使用ip又不好整怎么办。过来人教你骚操作…

①：使用host配置一个虚拟的域名
一般都是在自己本机的这个目录下 C:\Windows\System32\drivers\etc\hosts 打开hosts文件配置一个本地的域名。如我的

192.168.1.76 www.baoxiu.cn

②：接着上一步：你配置完，可能会报错 Invalid Host header vue-cli3中，修改如下配置，并记得重启项目运行

module.exports = {
  devServer: {
  	port: 80,
    disableHostCheck: true
  }
}

③：修改项目启动端口为80，因为默认的端口是80端口。并记得重启项目运行，通过扫码成功后返回的/bindAccount 地址并且返回了code和state参数

④：后台配置的回调地址依然是 www.baoxiu.cn 切记，这里不是ip了。这个坑主要是讲怎么把ip配成域名去扫码登录。

---

7. 坑点3：内嵌式微信扫码登录跳转页面大小错误

内嵌式微信扫码登录成功后跳转页面的容器是这个二维码的div 而不是以浏览器为容器，出现一下问题。

解决办法：

self_redirect 否 true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri，false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。默认为 false。
so，把 self_redirect 参数设置为 false 即可

self_redirect: false,