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 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录