vue-music
依存関係をダウンロードする
プロジェクトを開始する
パッケージプロジェクト
バックエンド GitHub アドレス
https://github.com/Binaryify/NeteaseCloudMusicApi 開発時の対応バージョン:4.0.23 問題が発生した場合は最新バージョンを選択してください
プレビューアドレス
NetEase Cloudの音楽プレビューアドレスを模倣
ユニアプリ版
ユニアプリバージョンウェアハウス
現在完成している機能
- ソングプレーヤー: 再生、ドラッグ進行、音量調整、ダウンロード、プレイリスト、ソングページの歌詞スクロール、コメント
- ディスカバリーページ: おすすめ、プレイリスト、歌手、ランキング、最新の音楽 (新曲エクスプレス、棚にある新しいアルバム (今週の新しいアルバム))
- ログイン:携帯電話番号とパスワードでログイン、QRコードでログイン、認証コードでログイン、ログアウト
- 曲リスト:「いいね!」、アルバムエントリー、歌手エントリー、現在再生中の音楽ライン
- 各詳細ページ
- プレイリスト詳細ページ: 曲リスト、プレイリスト ページ検索、完全なプレイリストの読み込み、コレクション、コメント
- アルバム詳細ページ: 曲リスト、検索、コレクション、コメント、アルバム詳細
- 歌手の詳細ページ: アルバムリスト、歌手の説明、MV、似ている歌手
- ビデオ詳細ページ: ビデオ再生 (ネイティブ ビデオとコントロールを使用した再生)、類似ビデオの推奨、MV の再生、MV の推奨、いいね、コレクション、コメント、クリエイターのフォロー
- ユーザー詳細ページ:基本情報、地域(国内地域のみ対応)、作成したプレイリスト、お気に入りのプレイリスト、更新された個人情報、アバター
- 検索: 曲、歌手、プレイリスト、ユーザー、MV、アルバム検索、ホット検索リスト、検索候補、検索結果へのクイックアクセス
- コメント (ログインが必要): いいね、返信、コメント、コメントのページネーション、ページ番号のジャンプと返信のジャンプ入力ボックスのアニメーション
- 動画(要ログイン):動画一覧、MVリスト、全MVページ、MVランキングページ
- マイコレクション (ログインが必要): 収集したアルバム、MV、歌手、フィルタリング機能
- 最近再生したもの (クラウド再生記録ではなく、ローカル ストレージ)
- プライベート FM (ログインが必要): 再生、ゴミ箱、いいね、コメント、歌詞スクロール (ここでのパフォーマンスは NetEase Cloud と同じではありません。一貫性を持たせたい場合は、大幅に変更する必要があります)
- すべてのページはモバイル対応です
- ルートとコード チャンクの遅延読み込み、ログインしていないときのナビゲーション ガードの追加、ルート プロパティの分離
- Vuex を使用して、ログイン ステータス、現在の曲リストと曲のステータス、その他の複数コンポーネントのステータスを管理します
- 共有インターフェイスは NetEase Cloud のダイナミクスに共有することです。動的部分がまだ行われていないため、すべての共有は無効です。NetEase Cloud によると、すべての曲を収集するパフォーマンスは、作成されたプレイリストに収集するか、新しいプレイリストを作成します。まだ追加されていません。
バグまたはアップデート
- 完全な曲をプレイリストにロードする際の制限を追加しました (使用中に、6,000 曲のシングルを含むプレイリストが検出され、trackIds を使用して対応する曲をリクエストすると 431 エラーが発生しました)
- 最近再生した曲の数に制限を追加 11/19
- ナビガード追加後、失われたログイン状態が更新され、ログイン状態を再取得するとナビエラーが発生する不具合を解決 11/20
- ビデオ再生中に曲の再生を停止する機能を追加しました
- 歌手詳細ページの類似歌手タブで歌手を切り替えるとデータが更新されない問題を解決
- 歌詞スクロールのjsアニメーションを追加
- ルーティングビュー切り替えアニメーションを追加
- 歌手の詳細ページにデータをロードするためのタブ切り替えアニメーションと空の場合のプロンプトを追加しました
- @rootディレクトリを追加し、機能ごとにAPIをモジュール化して管理を容易にします
- スロットという名前のスコープのバックアップ コンテンツがパッケージ化された後に有効にならないという問題が発生しました。これは開発環境では正常に動作し、バックアップ コンテンツを使用する代わりにすべてのバックアップ コンテンツを使用することしかできません。
- JS の安全な最大数を超える問題が発生しており、まだ解決されていません (検索候補を取得するときに取得される曲情報内の画像が NULL ですが、画像 ID は存在しますが、超えると不正確になります)安全な番号)、データを自分で処理するための axios を定義できます (axios のデフォルトは JSON.parse です)。関連するプラグインがあります。
- 楽曲ページのコメント欄でユーザーをクリックしてユーザールートにジャンプするが再生インターフェースが閉じないバグ、およびユーザーページがIDで切り替わらないバグを解決し、重複ロジックを削除再生コンポーネントの
- モバイル端末の輪郭は角丸になっていないので、枠線に置き換えます。
- アルバム リスト、プレイリスト リスト、歌手リストを 1 つのコンポーネントに統合
- レンダリングされたデータのみをフリーズしてパフォーマンスを最適化する
- ビデオの詳細と MV の詳細ページを 1 つのコンポーネントに統合
- ほとんどのサブページは同じスクロール バーを使用し、ルーティング アドレスを監視し、スクロール バーをリセットし、曲を変更するときに曲再生ページのスクロール バーをリセットします。
- コメント内の長い数値が折り返されないバグを修正しました
- 曲の進行が前方に引っ張られ、歌詞のアクティブ化ラインが変更されないバグを解決しました。歌詞のスクロール判定の現在の時間ソースが変更されました (以前はオーディオのリアルタイム再生時間でしたが、現在は送信された現在時間です)。 vuex は前者による処理後に、歌詞コンポーネントを抽出する(プライベート FM を再利用する必要がある)。
- Chrome ではメディア タグに制限があり、自動的に再生するにはユーザーの操作が必要です。
- 編集で作成したプレイリスト情報を追加し、VueCropper プラグインを使用して画像をトリミングします
- 個人情報の追加には、領域を追加せずにアバターをトリミングおよび変更すること、画像をトリミングしてブロブ オブジェクトに処理し、それをコンポーネント (ソングリスト カバーおよび個人アバター) にカプセル化することが含まれます。
- Nprogress を使用してキャンセルする
- シンガー ページは ELTABS の使用をキャンセルし、代わりにプロジェクトで TabMenu を使用します。カプセル化された axios リクエストの get メソッドを変更し、async/await で受信できるようにエラーの処理方法を変更します。
- 一部のプラグイン cdn の読み込みは少し遅く、初回読み込み時に長い白い画面が表示されます。
- ログアウト後にホームページに戻れないバグと、一部のページ画像の読み込みが遅いバグを解決
- いくつかの画像の遅延読み込みを追加し、いくつかの不合理なスケルトンを削除し、コンポーネントの使用方法の標準化を変更しました。
- そして、vue3 + ts バージョンのリファクタリングで見つかったバグを変更します