目前代碼已經基本寫完,還有細節沒有處理，除配置文件外，一共600多行代碼效果如下
vue3中 beforeDestroy變成了beforeUnmount
調試
使用火狐瀏覽器 F12
然後頁面就會出現這個
頁面佈局
搜索欄
使用vant3的搜索 vant3 search 文檔入口
<van-search
v-model="value"
shape="round"
background="#4fc08d"
placeholder="請輸入搜索關鍵詞"
/>
歌曲列表
使用了vant3的tabs標籤頁 vant3 tabs 文檔入口
使用在單歌和喜歡這裏
vant3 tabs支持粘性佈局和吸頂 可以拿來用 對我們就是cv工程師
當沒有內容的時候展示空狀態 使用vant3空狀態 vant3 空狀態
<van-empty description="我是你的小可愛~" />
底部歌曲簡略
默認沒有加載 或者加載中都用vant3 圖片組件的默認貓咪
讓這個貓貓所在的圖片不停的旋轉
綠色塊塊將寫切割功能
<div
style="width:100%;height: 50px;background-color: #42b983;position: absolute;bottom: 0"
></div>
<van-image
class="transr"
round
width="5rem"
height="5rem"
:src="imgUrl" 默認爲https://img.yzcdn.cn/vant/cat.jpeg
></van-image>
</div>
旋轉樣式如下
.transr {
float: left;
animation: rotate 10s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
歌曲播放詳細頁面
使用scroll來實現歌詞滾動
底部的圖像滾動和上面的實現方法一樣
左上角圖標返回歌單
<van-icon
name="arrow-left"
color="#42b983"
style="position: fixed;top:0;left:0;z-index:9999"
size="2rem"
@click="isPlays = false"
/>
<div class="transfr" id="gunDoc">
<p v-for="item in docs" :key="item" style="color: white">
<span :class="{ gop: item.time === isP }">{
{ item.doc }}</span>
</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div style="position: fixed;bottom: 0px;width: 100%">
<van-image
round
width="5rem"
height="5rem"
:src="imgUrl"
id="img"
class="trans"
/>
<van-slider
v-model="value"
active-color="#54967A"
style="width: 100%"
bar-height="8px"
>
<template #button>
<div class="custom-button">{
{ value }}</div>
</template>
</van-slider>
<van-icon
:name="isPlay"
size="4rem"
style="position: absolute;left: 41%;top: 10px"
color="#E3EEBC"
@click="playOrpause"
/>
</div>
:class="{ gop: item.time === isP }"動態綁定樣式 來改變當前歌詞樣式
由於歌詞是帶有時間戳的 可以根據時間來判斷當前歌詞 並讓它自己滾動
獲取歌詞小插曲
本系列上個文章只列了找到的幾個接口 傳送門
歌詞接口也找到了，但是需要僞造referer
GET
https://c.y.qq.com/lyric/fcgi-binfcg_query_lyric_new.fcg?songmid=歌曲id和播放Id不同，爲獲取歌曲詳情裏的songid
需要僞造referer爲"https://y.qq.com/portal/player.html"
獲取的結果爲
看到這串字母，首先想到的是base64加密
我們可以拿到在線base64解碼去嘗試下 網上隨便找個都能解
得到
js處理策略爲
res爲請求返回結果
decodeURIComponent(
escape(atob(JSON.parse(res.data.slice(18, -1)).lyric))
);
後續會推出
每個平臺的詳細搭建過程
前端：js入門 vue入門 vue開發小程序 等
後端： java入門 springboot入門等
服務器：mysql入門 服務器簡單指令 雲服務器運行項目
python：推薦不溫卜火 一定要看哦
一些插件的使用等
大學之道亦在自身，努力學習，熱血青春
如果對編程感興趣可以加入我們的qq羣一起交流：974178910
有問題可以下方留言，看到了會回覆哦