博客

最近项目需要开发新功能，微信扫码登录，先上代码：

步骤1：在页面中先引入如下JS文件（支持https）：

http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js

步骤2：在需要使用微信登录的地方实例以下JS对象：（我是在点击事件触发）

var obj = new WxLogin({
 self_redirect:true,//是否在显示的二维码区域跳转，默认是false
 id:"login_container", 
 appid: "", //
 scope: "", 
 redirect_uri: "",//需要微信授权域名一致
  state: "",
 style: "",
 href: ""
 });

以上代码昨晚页面显示了二维码，可以扫码登录，并且跳转，但是只会在二维码区域跳转，于是去掉 self_redirect这一项，结果是并不会跳转页面，于是百度了好多不跳转的原因

然后在大佬的帮助下，最终找到原因：在谷歌浏览器调试的时候，iframe标签跨域问题导致无法跳转。

加上这个代码之后sandbox=“allow-scripts allow-top-navigation allow-same-origin”，刷新页面再测，就没问题了，可以正常跳转了

以下项目中修改代码：

created() {
    // createScript(
    //   "http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"
    // );
    !(function(a, b, c) {
      function d(a) {
        var c = "default";
        a.self_redirect === !0
          ? (c = "true")
          : a.self_redirect === !1 && (c = "false");
        var d = b.createElement("iframe"),
          e =
            "https://open.weixin.qq.com/connect/qrconnect?appid=" +
            a.appid +
            "&scope=" +
            a.scope +
            "&redirect_uri=" +
            a.redirect_uri +
            "&state=" +
            a.state +
            "&login_type=jssdk&self_redirect=" +
            c +
            "&styletype=" +
            (a.styletype || "") +
            "&sizetype=" +
            (a.sizetype || "") +
            "&bgcolor=" +
            (a.bgcolor || "") +
            "&rst=" +
            (a.rst || "");
        (e += a.style ? "&style=" + a.style : ""),
          (e += a.href ? "&href=" + a.href : ""),
          (d.src = e),
          (d.frameBorder = "0"),
          (d.allowTransparency = "true"),
          (d.sandbox = "allow-scripts allow-top-navigation allow-same-origin"),//修改的代码在此处，
          (d.scrolling = "no"),
          (d.width = "300px"),
          (d.height = "400px");
        var f = b.getElementById(a.id);
        (f.innerHTML = ""), f.appendChild(d);
      }
      a.WxLogin = d;
    })(window, document);
  },

以上就解决了，欢迎指正~~~