資訊專欄INFORMATION COLUMN
摘要：最近在做客戶端掃描端二維碼登錄，于是記錄一下實現過程，前端是，是和安卓客戶端安裝，就可以了。
最近在做APP客戶端掃描PC端二維碼登錄，于是記錄一下實現過程，前端是vuejs，APP是IOS和安卓客戶端：
1.安裝QRCode，npm i QRCode --save-dev就可以了。
2.安裝成功后在對應的單頁面中引用import QRCode from "qrcode",如果此時頁面沒有報錯，說明引入成功了
3.向服務端獲取qrcode字符串
getQrcode: function () {
this.$http.jsonp("這里是接口地址", {}).then((response) => {
const data = response.body
if(data.ok === 1) {
this.qrCode = data.qrCode
this.screenLogin() //調用生成二維碼方法
}
})
},
4.獲取到qrcode字符串后生成二維碼
qrcodeShow: function () {
this.qrcodeShow = true //顯示二維碼div
var QRCodeDraw = new QRCode.QRCodeDraw() //創建二維碼變量
var canvas = document.getElementById("qrcode") //獲取div
//開始生產二維碼
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.最后就是獲取和發送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)
}
//接收服務端推送過來的信息
ws.onmessage = function(event) {//event參數接收
//接收到服務器推送信息并轉換成json對象
var re = JSON.parse(event.data)
//判斷action是否正確，然后執行登錄方法,這里的action是和服務端約定好的參數
if(re.action === "qrCode") {
_this.getLogin() //掃描成功調用登錄方法
_this.qrcodeShow = false //隱藏二維碼div
}
}
//發送socket給服務端判斷
ws.onopen = (event) => {
if (this.id) {
ws.send(JSON.stringify({
//與服務端約定好發送這兩個參數
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);
}
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85112.html
摘要：最近搞微信第三方登錄，搞蒙圈了。當你把服務號綁定到開放平臺之后，網頁授權返回的數據會多一個，同一個微信賬號在同一個開放平臺賬號下的是一致的。 最近搞微信第三方登錄，搞蒙圈了。 我們的業務有兩個場景需要使用微信第三方登錄：1、APP 第三方登錄2、H5網頁第三方登錄，具體流程：用戶微信端收到一個二維碼--->掃碼后同意微信授權-->綁定手機號碼 一開始糾結著是不是需要申請公眾號，找了個專...
摘要：微信支付方式付款碼支付適用于線下場所支付支付是指商戶通過調用微信支付提供的接口，在支付場景中調起微信支付模塊完成收款。主要用于觸屏版的手機瀏覽器請求微信支付的場景。可以方便的從外部瀏覽器喚起微信支付。 微信支付方式（https://pay.weixin.qq.com/sta...）： 1、付款碼支付————————適用于線下場所 2、JSAPI支付————————JSAPI支付是指商戶...
摘要：隨著微信的普及，掃碼登錄方式越來越被現在的應用所使用。這里基于微信公眾平臺的帶參數臨時二維碼，并且結合的服務實現掃碼登錄。對于用戶掃臨時的二維碼，微信會觸發相應的回調事件，我們需要在該回調事件中處理用戶的掃碼行為。 隨著微信的普及，掃碼登錄方式越來越被現在的應用所使用。它因為不用去記住密碼，只要有微信號即可方便快捷登錄。微信的開放平臺原生就有支持掃碼登錄的功能，不過大部分人還是在用公眾...
閱讀 3095·2021-10-13 09:40
閱讀 3945·2021-09-22 15:51
閱讀 1493·2021-09-22 15:48
閱讀 1060·2021-09-06 15:00
閱讀 1790·2019-08-30 15:43
閱讀 2356·2019-08-29 18:35
閱讀 1667·2019-08-29 16:18
閱讀 3612·2019-08-29 12:49
