微信登陆时前端展示二维码的方式(两种)
1.前端采用js实例化一个二维码嵌入我们的HTML元素中(可以自定义样式)
2.向后台发请求返回一个链接,这个链接指向二维码的扫描页面(不好修改样式)
前端采用js实例化一个二维码
//在<head>标签内添加如下js文件
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
//id为login_container的DOM元素,用来包含二维码
<div id="login_container"></div>
//最后在$(document).ready()内进行实例化
$(document).ready(function()
{
var obj = new WxLogin
({
id : "login_container", //div的id
appid : "你的appid",
scope : "snsapi_login", //写死的字符串
redirect_uri : encodeURI("你的处理扫码事件的方法") ,
state : "",
style : "black", //二维码黑白风格
href : "https: //某个域名下的css文件,来定义样式"
});
});
注意:redirect_uri的值如果你们后台已经给你转过码就不需要使用encodeURI方法来转码了,直接写你们后台返给你的值就好,当然如果encodeURI()方法不管用你可以试试encodeURIComponent()方法来进行转码
这种方式生成的二维码,扫描以后,后台会配置一个重定向的地址,这些你可以和你们后台人员协商看怎么处理
向后台发请求返回一个链接
这种方式就是我们可以在点击事件的时候触发请求,然后得到后台返回的链接地址,但是想要展示二维码,我们可以使用window.open来打开这个链接指向的二维码地址,并且在新开的窗口监听self.close()事件,然后使用一个setInterval在父级页面监听新开的窗口的关闭事件来进行对应操作
//在项目里面的点击事件,里面
myClick(){
//定义一个windowObj 对象
let windowObj = null;
ajax({
....
success(res , data){
//采用window.open新打开一个窗口,data就是你们后台返回给你的链接
windowObj = window.open(data, "_blank", "height=560,width=550, top=50,left=200");
}
})
//采用延时器做轮询,监听新开页面的self.close()事件
let loop = setInterval(function() {
if(windowObj != null && windowObj.closed) {
clearInterval(loop);
//do something 在这里执行回调,做你自己想要做的操作,比如重新发ajax请求其他参数等等
}, 800);
}
新开的子页面,这个子页面就是一个二维码,当扫码成功以后,子页面会跳转到你们后台重定向的你的前端写好的html页面(一般用来提示用户扫描登录成功),你就需要在这个页面里面写上你的self.close();方法,这样子父页面的轮询才会监听到,当然你不写这个方法,你直接点关闭窗口轮询也会检测到子窗口关闭了,只不过这种自动关闭省得用户自己动手操作啦
<div id="time" class="close_bind_success_tips"></div>
<script>
let closeWin = setInterval("clock()",1000);
var num = 2;
function clock(){
document.getElementById("time").innerHTML = num + " 秒以后将关闭本窗口 !!!";
if (num > 0) {
num--
} else {
//重点是这个方法,在父页面里面会监听到这个方法
self.close();
clearInterval(closeWin);
}
}
// })
</script>
网友评论