趁著幾天有空的時(shí)間做了個(gè)超級(jí)簡(jiǎn)單的音樂（pc端）

首先講登錄（這里演示掃碼登錄）

第一步看接口文檔

1. 二維碼key生成接口

說(shuō)明: 調(diào)用此接口可生成一個(gè)key

接口地址 :?/login/qr/key

2. 二維碼生成接口

必選參數(shù):?key,由第一個(gè)接口生成

可選參數(shù):?qrimg?傳入后會(huì)額外返回二維碼圖片base64編碼

接口地址 :?/login/qr/create

3. 二維碼檢測(cè)掃碼狀態(tài)接口

必選參數(shù):?key,由第一個(gè)接口生成

接口地址 :?/login/qr/check

第二步看完文檔，當(dāng)然是去接接口哇（另一篇文檔有寫如何封裝請(qǐng)求頭）

// 時(shí)間戳timestamp
// 說(shuō)明: 調(diào)用此接口可生成一個(gè)key

export function qrCodeLoginKey(timestamp){return request.get('/login/qr/key?timestamp='+timestamp) }

// 2. 二維碼生成接口
// 說(shuō)明: 調(diào)用此接口傳入上一個(gè)接口生成的key可生成二維碼圖片的base64和二維碼信息,可使用base64展示圖片,或者使用二維碼信息內(nèi)容自行使用第三方二維碼生成庫(kù)渲染二維碼

export function qrCodeLoginImg(key){return request.get('/login/qr/create?qrimg=true&key='+key) }

// 3. 二維碼檢測(cè)掃碼狀態(tài)接口
// 說(shuō)明: 輪詢此接口可獲取二維碼掃碼狀態(tài),800為二維碼過(guò)期,801為等待掃碼,802為待確認(rèn),803為授權(quán)登錄成功(803狀態(tài)碼下會(huì)返回cookies)

export function qrCodeLoginCheck(key,timestamp){return request.get('/login/qr/check?key='+key+'&timestamp='+timestamp) }

第三步引入后，寫二維碼登錄邏輯

按需引入

import {qrCodeLoginKey,qrCodeLoginImg,qrCodeLoginCheck} from '../api/necessary.js'

再寫邏輯前我們要明白是什么邏輯！！！（這個(gè)很重要）

首先我們要通過(guò)第一個(gè)接口拿到key，然后給key第二個(gè)接口拿到二維碼圖片，最后是每隔一段時(shí)間調(diào)第三接口check檢測(cè)登錄狀態(tài)!!!

HAO！邏輯知道了，開始動(dòng)手

login: async function() {let nowtime = Date.now();//調(diào)第一個(gè)接口拿keylet key = (await qrCodeLoginKey(nowtime)).data.data.unikey//調(diào)第二個(gè)接口拿二維碼圖片let sginImgURL = (await qrCodeLoginImg(key)).data.data.qrimgthis.$store.state.signShow = truethis.$store.state.signURL = sginImgURL// 800為二維碼過(guò)期,801為等待掃碼,802為待確認(rèn),803為授權(quán)登錄成功//每三秒check一次let check = setInterval(async () => {let nowtime2 = new Date().getTime();let res = await qrCodeLoginCheck(key,nowtime2).then()console.log(res.data.message, '---')if (res.data.code == 800) {alert(res.data.message)clearInterval(check)}if (res.data.code == 803) {alert(res.data.message)clearInterval(check)}}, 3000)}

最后看一下效果圖

總結(jié)

以上是生活随笔為你收集整理的基于网易云API做的一个扫码登录的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。