微信登陸時前端展示二維碼的方式(兩種)
1.前端采用js實例化一個二維碼嵌入我們的HTML元素中(可以自定義樣式)
2.向后臺發(fā)請求返回一個鏈接,這個鏈接指向二維碼的掃描頁面(不好修改樣式)
前端采用js實例化一個二維碼
//在<head>標簽內(nèi)添加如下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()內(nèi)進行實例化
$(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的值如果你們后臺已經(jīng)給你轉(zhuǎn)過碼就不需要使用encodeURI方法來轉(zhuǎn)碼了,直接寫你們后臺返給你的值就好,當然如果encodeURI()方法不管用你可以試試encodeURIComponent()方法來進行轉(zhuǎn)碼
這種方式生成的二維碼,掃描以后,后臺會配置一個重定向的地址,這些你可以和你們后臺人員協(xié)商看怎么處理
向后臺發(fā)請求返回一個鏈接
這種方式就是我們可以在點擊事件的時候觸發(fā)請求,然后得到后臺返回的鏈接地址,但是想要展示二維碼,我們可以使用window.open來打開這個鏈接指向的二維碼地址,并且在新開的窗口監(jiān)聽self.close()事件,然后使用一個setInterval在父級頁面監(jiān)聽新開的窗口的關(guān)閉事件來進行對應操作
//在項目里面的點擊事件,里面
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");
}
})
//采用延時器做輪詢,監(jiān)聽新開頁面的self.close()事件
let loop = setInterval(function() {
if(windowObj != null && windowObj.closed) {
clearInterval(loop);
//do something 在這里執(zhí)行回調(diào),做你自己想要做的操作,比如重新發(fā)ajax請求其他參數(shù)等等
}, 800);
}
新開的子頁面,這個子頁面就是一個二維碼,當掃碼成功以后,子頁面會跳轉(zhuǎn)到你們后臺重定向的你的前端寫好的html頁面(一般用來提示用戶掃描登錄成功),你就需要在這個頁面里面寫上你的self.close();方法,這樣子父頁面的輪詢才會監(jiān)聽到,當然你不寫這個方法,你直接點關(guān)閉窗口輪詢也會檢測到子窗口關(guān)閉了,只不過這種自動關(guān)閉省得用戶自己動手操作啦
<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 + " 秒以后將關(guān)閉本窗口 !!!";
if (num > 0) {
num--
} else {
//重點是這個方法,在父頁面里面會監(jiān)聽到這個方法
self.close();
clearInterval(closeWin);
}
}
// })
</script>
