目前代碼已經基本寫完,還有細節沒有處理，除組態檔外，一共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>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</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

有問題可以下方留言，看到了會回復哦