Описание Проекта
Это основано наVue2.xа такжеAPI облачной музыки NetEaseмобильный телефонweb appПроект; не NetEase Cloud Music, так как он предназначен для практики и экспериментов.appизальтернативы, и в настоящее время не охватывает все функции;
Некоторые из основных инструментов, используемых в этом проекте:
-
webpackа такжеwebpack-dev-server -
vueсемейное ведро - Проект NeteaseCloudMusicApi
axiosbetter-scrollvue-lazyloadIconfontMuse-UI
гитхаб:GitHub.com/Xie Xingfang1996/v UE…
Интернет-адрес:xiexuefeng.cc/app/music
Условия и положения
Поскольку в проекте используетсяAPIИнтерфейс полностью основан наNeteaseCloudMusicApiпроект, поэтому вам нужно заранее запустить проект как интерфейсный сервер (независимо от того, локальный он или в облаке); модифицировать его после запускаsrc/index.jsв файлеAPIИнтерфейс может быть установлен на фактический адрес интерфейса.
как бежать
Установить зависимости
npm i
развивать
npm start
Порт по умолчанию8080;
Релиз пакета
npm run build
Путь упаковки по умолчанию:dist;
Описание функции
Потому что он предназначен для мобильных устройств.web app, поэтому используяremМакет для адаптации к мобильным устройствам с разными разрешениями, эскиз дизайна основан на375pxШирина устройства по образцу NetEase Cloud Music.appверстка и дизайн страницы. В настоящее время производятся следующие функциональные интерфейсы:
страница входа (псевдо)
Почему вы говорите «псевдо» логин, потому что это просто для того, чтобы получить пользователяuid, данные, полученные после этого, являются некоторымипубличный только для чтения, а операции, которые фактически изменяют информацию о пользователе (например, избранное, лайки, комментарии и т. д.), использовать нельзя;NeteaseCloudMusicApiПроект предоставляется с NetEase Cloud MusicappТот же интерфейс мобильного телефона или входа по электронной почте, но поскольку моя цель не в том, чтобы сделать замену, просто попрактиковаться в проектах и протестировать некоторые функции, использоватьuidДостаточно получить некоторые данные «только для чтения» (плюс пароли пользователей и соображения безопасности).
Так как же проверить свою учетную запись NetEase Cloud Music?IDколичество? Тогда вам нужно быть в NetEase Cloud MusicPCПросматривайте свою личную домашнюю страницу в Интернете, напримерhttps://music.163.com/#/user/home?id=xxxxxxx,idПоследняя строка цифр — это учетная запись.ID.
О туристическом режиме
Гостевой режим на самом деле не набирает пользователейuidВот и все, поэтому информация о «вошедшем в систему» пользователе не может быть просмотрена (например, информация боковой панели и список воспроизведения пользователя на домашней странице и т. д.), а другие данные практически не затрагиваются.
титульная страница
Боковая панель
Значок в левом верхнем углу домашней страницы, нажмите, чтобы открыть боковую панель для просмотра информации о пользователе и некоторых настроек;
Проведите пальцем влево или нажмите снаружи, чтобы убрать;
Просмотреть другие элементы списка песен
По умолчанию блок плейлиста на главной странице отображает до двух строк (2x3,6а) Информация о плейлисте, нажмите внизу заголовка столбца, чтобы открыть всю информацию:
Страница сведений о плейлисте
Всплывающее окно управления песней
с участием3Значок вертикального происхождения, щелкните его, и внизу операции с песней появится всплывающее окно:
Маленький игрок внизу
После нажатия на элемент песни на странице, такой как плейлист или альбом, внизу появится небольшой проигрыватель:
Играть в полноэкранном режиме
Щелкнув по нижнему проигрывателю, вы перейдете на страницу полноэкранного воспроизведения:
После включения опции «Показать спектр» (по умолчанию отключена, так как некоторые браузерыWebAuio APIПоддержки не хватает), на обложке можно увидеть спектрограмму в реальном времени:
Нажмите на обложку, чтобы перейти на полноэкранную страницу с текстами песен:
текущий плейлист
страница комментариев
страница альбома
Страница с информацией о певице
Страница сведений о пользователе
страница поиска
Щелкните значок поиска в верхнем меню, чтобы перейти на страницу поиска, введите ключевое слово в поле ввода и нажмите Enter, чтобы получить результаты поиска; в настоящее время поддерживается только один тип.
личные заметки
Конечно же, при написании этого проекта я столкнулся со многими проблемами, в основном встречающиеся проблемы будут записываться, а некоторые из них специально систематизированы и размещены на блоге: