資訊專欄INFORMATION COLUMN
摘要：最近在做客戶端掃描端二維碼登錄，于是記錄一下實現(xiàn)過程，前端是，是和安卓客戶端安裝，就可以了。
最近在做APP客戶端掃描PC端二維碼登錄，于是記錄一下實現(xiàn)過程，前端是vuejs，APP是IOS和安卓客戶端：
1.安裝QRCode，npm i QRCode --save-dev就可以了。
2.安裝成功后在對應(yīng)的單頁面中引用import QRCode from "qrcode",如果此時頁面沒有報錯，說明引入成功了
3.向服務(wù)端獲取qrcode字符串
getQrcode: function () {
this.$http.jsonp("這里是接口地址", {}).then((response) => {
const data = response.body
if(data.ok === 1) {
this.qrCode = data.qrCode
this.screenLogin() //調(diào)用生成二維碼方法
}
})
},
4.獲取到qrcode字符串后生成二維碼
qrcodeShow: function () {
this.qrcodeShow = true //顯示二維碼div
var QRCodeDraw = new QRCode.QRCodeDraw() //創(chuàng)建二維碼變量
var canvas = document.getElementById("qrcode") //獲取div
//開始生產(chǎn)二維碼
QRCodeDraw.draw(canvas, "qrcode:" + this.qrCode, {//this.qrCode是上面獲取到的字符串
width: 300,//二維碼寬和高
height: 300
}, (err, canvas) => {
if (err) {
console.error(err);
} else {
console.info("success")
}
})
},
5.html里面二維碼div的寫法
6.qrcodeShow是在
data () {
return {
qrcodeShow: false //默認不可見
}
}
6.最后就是獲取和發(fā)送websocket
websocket: function() {
var ws //定義websocket變量
try {//使用try catch
var _this = this //this指向
var WS_URL = "/websocket" //websocket地址
if (location.protocol == "http:") {
ws = new WebSocket("ws://"+WS_URL)
} else {
ws = new WebSocket("wss://"+WS_URL)
}
//接收服務(wù)端推送過來的信息
ws.onmessage = function(event) {//event參數(shù)接收
//接收到服務(wù)器推送信息并轉(zhuǎn)換成json對象
var re = JSON.parse(event.data)
//判斷action是否正確，然后執(zhí)行登錄方法,這里的action是和服務(wù)端約定好的參數(shù)
if(re.action === "qrCode") {
_this.getLogin() //掃描成功調(diào)用登錄方法
_this.qrcodeShow = false //隱藏二維碼div
}
}
//發(fā)送socket給服務(wù)端判斷
ws.onopen = (event) => {
if (this.id) {
ws.send(JSON.stringify({
//與服務(wù)端約定好發(fā)送這兩個參數(shù)
room: "topic:" + this.id,
action: "join"
}))
} else if (this.qrCode) {
ws.send(JSON.stringify({
room: "qrCode:" + this.qrCode,
action: "join"
}))
} else {
ws.send(JSON.stringify({
room: "home",
action: "join"
}))
}
};
} catch (ex) {
if (console)
console.info(ex);
}
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/85112.html
摘要：最近搞微信第三方登錄，搞蒙圈了。當你把服務(wù)號綁定到開放平臺之后，網(wǎng)頁授權(quán)返回的數(shù)據(jù)會多一個，同一個微信賬號在同一個開放平臺賬號下的是一致的。 最近搞微信第三方登錄，搞蒙圈了。 我們的業(yè)務(wù)有兩個場景需要使用微信第三方登錄：1、APP 第三方登錄2、H5網(wǎng)頁第三方登錄，具體流程：用戶微信端收到一個二維碼--->掃碼后同意微信授權(quán)-->綁定手機號碼 一開始糾結(jié)著是不是需要申請公眾號，找了個專...
摘要：微信支付方式付款碼支付適用于線下場所支付支付是指商戶通過調(diào)用微信支付提供的接口，在支付場景中調(diào)起微信支付模塊完成收款。主要用于觸屏版的手機瀏覽器請求微信支付的場景?？梢苑奖愕膹耐獠繛g覽器喚起微信支付。 微信支付方式（https://pay.weixin.qq.com/sta...）： 1、付款碼支付————————適用于線下場所 2、JSAPI支付————————JSAPI支付是指商戶...
摘要：隨著微信的普及，掃碼登錄方式越來越被現(xiàn)在的應(yīng)用所使用。這里基于微信公眾平臺的帶參數(shù)臨時二維碼，并且結(jié)合的服務(wù)實現(xiàn)掃碼登錄。對于用戶掃臨時的二維碼，微信會觸發(fā)相應(yīng)的回調(diào)事件，我們需要在該回調(diào)事件中處理用戶的掃碼行為。 隨著微信的普及，掃碼登錄方式越來越被現(xiàn)在的應(yīng)用所使用。它因為不用去記住密碼，只要有微信號即可方便快捷登錄。微信的開放平臺原生就有支持掃碼登錄的功能，不過大部分人還是在用公眾...
閱讀 3178·2021-10-13 09:40
閱讀 4039·2021-09-22 15:51
閱讀 1566·2021-09-22 15:48
閱讀 1136·2021-09-06 15:00
閱讀 1878·2019-08-30 15:43
閱讀 2431·2019-08-29 18:35
閱讀 1769·2019-08-29 16:18
閱讀 3692·2019-08-29 12:49
