记录pc网站微信登录(内嵌二维码方式)

官方文档地址：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

第一步：

引入官方js  http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

或者

把js下载下来放到自己项目里引用  好处是可以自己修改一些东西

!(function (e, t) {
  e.WxLogin = function (e) {
    var r = 'default';
    !0 === e.self_redirect ? (r = 'true') : !1 === e.self_redirect && (r = 'false');
    var n = t.createElement('iframe'),
      i =
        'https://open.weixin.qq.com/connect/qrconnect?appid=' +
        e.appid +
        '&scope=' +
        e.scope +
        '&redirect_uri=' +
        e.redirect_uri +
        '&state=' +
        e.state +
        '&login_type=jssdk&self_redirect=' +
        r +
        '&styletype=' +
        (e.styletype || '') +
        '&sizetype=' +
        (e.sizetype || '') +
        '&bgcolor=' +
        (e.bgcolor || '') +
        '&rst=' +
        (e.rst || '');
    (i += e.style ? '&style=' + e.style : ''),
      (i += e.href ? '&href=' + e.href : ''),
      (i += 'en' === e.lang ? '&lang=en' : ''),
      (n.src = i),
      (n.frameBorder = '0'),
      (n.allowTransparency = 'true'),
      (n.sandbox = 'allow-scripts allow-top-navigation allow-same-origin'),  // 防止重定向被拦截
      (n.scrolling = 'no'),
      (n.width = '320px'), // 自定义宽高
      (n.height = '400px');
    var s = t.getElementById(e.id);
    (s.innerHTML = ''), s.appendChild(n);
  };
})(window, document);

第二步：初始化微信二维码实例

如果想要修改二维码的样式，可以用部署好的css覆盖，或者采用base64编码方式传入

 const base64Css =

    'QGNoYXJ0c2V0ICJVVEYtOCI7Ci5pbXBvd2VyQm94IC5xcmNvZGUge3dpZHRoOiAyNDBweDt9Ci5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9Ci5pbXBvd2VyQm94IC5zdGF0dXNfaWNvbiB7d2lkdGg6IDMwcHg7aGVpZ2h0OjMwcHg7fQouaW1wb3dlckJveCAuc3RhdHVzIHtkaXNwbGF5OiBmbGV4O2FsaWduLWl0ZW1zOmNlbnRlcjtqdXN0aWZ5LWNvbnRlbnQ6Y2VudGVyO30='

const obj = new WxLogin({
      self_redirect: false,
      id: elementId,
      appid: 'xxx',
      scope: 'snsapi_login',
      redirect_uri: encodeURIComponent(`${window.location.origin}/xxx/test`),
      state: +new Date(),
      response_type: 'code',
      lang: 'zh',
      href: `data:text/css;base64,${base64Css}`,
    });

 这样可以得到二维码了，由于回调地址是不能是本地地址，或者使用内网穿透或者部署到测试环境进行调整。

第三步：手机微信扫码通过回调地址上的query拿到code