web端引入微信（vue项目）

微信.png

项目中实现微信登陆，实现用户自己扫描申请账号，不采用原始的用户名和密码登陆。

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

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

在vue中的index.html文件中引入该地址。

第二步: 在需要使用微信登录的地方实例以下JS对象：

 var obj = new WxLogin({
 self_redirect:true,
 id:"login_container", 
 appid: "", 
 scope: "", 
 redirect_uri: "",
  state: "",
 style: "",
 href: ""
 });

第三步：请求对应的url

      var that = this;
      var wx = function () {
        axios({
          method: "get",
          url: "后台给的url",
          data: qs.stringify({

          })
        }).then(result => {
          console.log(result.data.data);
          console.log(result.data.data.wechatQrcodeUrl);
          that.wechatQrcodeUrl = result.data.data.wechatQrcodeUrl;
          that.appid = result.data.data.appid;
          that.redirectUrl = result.data.data.redirectUrl;
          that.state = result.data.data.state;
          that.abb();

        });
      };
      wx();

  abb() {
        var obj =new WxLogin({
          self_redirect:true,
          id:'erwei',
          appid: this.appid,
          scope:'snsapi_login',
          redirect_uri:this.redirectUrl,
          state:this.state,
          style:'black',
          href:'后台给的样式地址',

        })
      },

参数说明

method： {
 abb() {
        var obj =new WxLogin({
          self_redirect:true,
          id:'erwei', // 这个id就是页面元素的 
          appid: this.appid,
          scope:'snsapi_login',
          redirect_uri:this.redirectUrl,
          state:this.state,
          style:'black',
        
          href:'后台给的样式地址',  // 这个样式用于控制 二维码的样式

        })
      },

},
mounted() {

var that = this;
      var wx = function () {
        axios({
          method: "get",
          url: "后台给的url",
          data: qs.stringify({

          })
        }).then(result => {
          console.log(result.data.data);
          console.log(result.data.data.wechatQrcodeUrl);
          that.wechatQrcodeUrl = result.data.data.wechatQrcodeUrl;
          that.appid = result.data.data.appid;
          that.redirectUrl = result.data.data.redirectUrl;
          that.state = result.data.data.state;
          that.abb();

        });
      };
      wx();



}

二维码的样式

* {
    margin: 0;
    padding: 0;
}

boby {
    background: #e9e9e9;
}
.ma iframe {
    height: 194px;
    width: 194px;
}
.main,.loginPanel {
    height: 194px;
    width: 194px;

}

.impowerBox {
    line-height: 1;
}
.impowerBox .qrcode {
    width: 194px;
    height: 194px;
    margin-top: 0;
    border: none;
}

.impowerBox .title {
    display: none;
}

.impowerBox .info {
    width: 100%;
}

.status_icon {
    display: none;
}

.impowerBox .status {
    text-align: center;
    padding: 0;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(92,94,97,1);
    line-height: 22px;
    letter-spacing: 1px;
    margin-top: 0;
}

.impowerBox .icon38_msg {
    height: 40px;
}

.js_wx_default_tip, #wx_default_tip {
    display: none;
}

完整的代码

最后编辑于：2019.06.28 17:36:47