現在、コードは基本的に記述されており、未処理の詳細が残っています。構成ファイルに加えて、合計600行以上のコードは以下のとおりです。

BeforeDestroyはvue3でbeforeUnmountになりました

デバッグ

Firefox F12
ここに写真の説明を挿入
を使用すると、このページが表示されます

ページレイアウト

検索バー

<van-search
  v-model="value"
  shape="round"
  background="#4fc08d"
  placeholder="请输入搜索关键词"
/>

ここに写真の説明を挿入

曲リスト

vant3タブタブを使用するvant3タブドキュメントエントリ。
単一の曲で使用するなど
ここに写真の説明を挿入
。vant3タブはスティッキーレイアウトをサポートし、天井を使用できます。私たちは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);
  }
}

曲再生詳細ページ

スクロールを使用して歌詞をスクロールします
。下部の画像スクロールは上記と同じです。
左上隅のアイコンが曲リストに戻ります。
ここに写真の説明を挿入

 <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}"スタイルを動的にバインドして、現在の歌詞のスタイルを変更します。
歌詞にはタイムスタンプが付いているため、時間に基づいて現在の歌詞を判断し、自動的にスクロールさせることができます。

歌詞ビネットを取得

インターフェイスに関するこの一連の記事では、ポータル
歌詞インターフェイスの一部しか見つかりませんでしたが、参照者を偽造する必要があります
ここに写真の説明を挿入
GET
https://cyqq.com/lyric/fcgi-binfcg_query_lyric_new.fcg?songmid=IDの曲と異なるIDの再生、曲の詳細で曲IDを取得するには、参照元
を「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はじめに
サーバーなどのスプリングブート：mysqlサーバーエントリ簡単な手順プロジェクトを実行するためのクラウドサーバー
python：暖かくないことをお勧めします神の火は必見ですああ
、いくつかのプラグインの使用など。

大学のやり方も自分自身で、一生懸命勉強し、
情熱を持って若くなります。プログラミングに興味がある場合は、qqグループに参加して一緒にコミュニケーションをとることができます：974178910
ここに写真の説明を挿入

ご不明な点がございましたら、下にメッセージを残していただければ、よろしければ返信いたします。

VUE ---クローラープレーヤー（3）---ページレイアウト--vue3