Корзина семейства Vue реализует NetEase Cloud Music WebApp

Разработайте мобильное музыкальное веб-приложение на основе Vue (2.5) + vuex + vue-router + vue-axios + better-scroll + Scss + ES6 и т. д. Интерфейс пользовательского интерфейса относится к версии Netease Cloud Music для Android, а гибкий макет адаптированы к обычным мобильным терминалам.

Из-за сервера некоторые вещи могут не загружаться, когда к нему обращаются несколько человек.Если к нему снова можно будет получить доступ через некоторое время, проблем не должно быть.Я очень сожалею о такой проблеме.

Адрес демонстрации проекта:Мобильное музыкальное веб-приложение, или вы можете отсканировать QR-код, чтобы получить доступ:

Для доступа рекомендуется использовать мобильный телефон, компьютер будет лучше в режиме отладки Chrome.После включения режима мобильного телефона в режиме отладки, если вы не можете прокручивать, просто обновите страницу.

Адрес источника:vue-music-webapp, добро пожаловать в звездочку и форк~

Если вы думаете, что я делаю хорошую работу, мне будет стыдно спроситьstar⭐️ Ха,starЭто самая большая поддержка для меня (старое лицо краснеет)

предварительный просмотр

Несмотря на то, что изображения были сжаты, они по-прежнему занимают около 3 МБ при загрузке вместе, так что наберитесь терпения. Если вы чувствуете себя хорошо, вы можете пойти по указанному выше адресу, чтобы испытать это ~

Детали плейлиста, персональный центр

плеер, плейлист

страница поиска

цель разработки

Научившись разрабатывать проект корзины семейства Vue, улучшите свои навыки использования корзины семейства Vue, модульной разработки, ES6 и других знаний, а также улучшите свои технические способности.

стек технологий

внешний интерфейс

Vue: Фреймворк MVVM для создания пользовательских интерфейсов.
vue-router: Система маршрутизации для одностраничных приложений, использующаяLazy Loading Routesметоды достижения асинхронной загрузки для оптимизации производительности
vuex: Vue централизует управление состоянием, что очень удобно, когда несколько компонентов имеют общее состояние.
vue-lazyload: Реализуйте ленивую загрузку изображений, сэкономьте пользовательский трафик и оптимизируйте скорость загрузки страниц.
better-scroll: подключаемый модуль, который решает потребности различных сценариев прокрутки на мобильном терминале, делая прокрутку на мобильном устройстве более плавной.
SCSS: процессор прекомпилятора css
ES6: синтаксис нового поколения ECMAScript, модульность, деструктурирующее присваивание, Promise, Class и другие методы очень просты в использовании.

задняя часть

Node.js: Локальный тестовый сервер, построенный с помощью Express
vue-axios: используется для запроса музыкальных данных внутреннего API
NeteaseCloudMusicApi: NetEase Cloud Music NodeJS API, предоставляющий музыкальные данные

Другие инструменты

vue-cli: Инструмент создания шаблонов Vue, быстрая инициализация кода проекта.
eslint: Инструмент проверки стиля кода, помогающий нам стандартизировать написание кода (необходимо разработать хорошие стандарты кода).
iconfont: Библиотека иконок Alibaba, кто знает, кто ею пользуется.
fastclick: устранена задержка клика в 300 мс в мобильных браузерах.

реализовать функцию

Ядро игрока, страница рекомендаций, страница горячего списка, страница исполнителя, сведения о списке песен, сведения о исполнителе, сведения о рейтинге, страница поиска, список воспроизведения, пользовательский центр и другие функции.

Страница лидеров

Данные таблицы лидеров также получаются через API, но, поскольку API получает данные обо всех песнях в таблице лидеров, неизбежно, что скорость загрузки будет немного медленнее Мы посмотрим, сможем ли мы оптимизировать ее позже. Ведь медленная загрузка повлияет на пользователей.Опыт, больше ничего.

страница певца

Реализуйте левую и правую связь списка исполнителей (это нужно понимать), потому что я уже писал блог, связанный с этим, поэтому я не буду писать больше, вы можете увидеть мою предыдущую заметку для деталей.Мобильная навигация по алфавитному указателю.

компонент списка песен

Используется для отображения списка песен, он повторно использовался во многих местах, таких как: страница сведений о списке песен, страница сведений о графике, страница сведений о исполнителе, результаты поиска, пользовательский центр и т. д.

Страница сведений о плейлисте

Получите данные песни в списке воспроизведения с помощью идентификатора списка воспроизведения, а затем выполните некоторые действия, чтобы испытать описанное выше, например, проведите пальцем вверх, чтобы отобразить строку состояния, а затем измените заголовок строки состояния на имя списка воспроизведения. можно попробовать.

Затем нужно повторно использовать компонент списка песен для отображения песен.

Детали диаграммы, детали певца

Это в основном то же самое, что и детали плейлиста, за исключением незначительных изменений в интерфейсе пользовательского интерфейса (разные оптимизации выполняются в соответствии с разным контентом).

игрок

Самый главный компонент все-таки музыкальный проигрыватель.Если ты не умеешь проигрывать песни, то это все ерунда.

Реализованные функции: последовательное воспроизведение, одиночный цикл, случайное воспроизведение, сбор и т. д.

Воспроизведение, приостановка аудио реализации с использованием HTML5.

Используются данные, статус воспроизведения, история воспроизведения, пользовательские песни и т. д.vuexЧтобы управлять, потому что данных слишком много, он будет мертвым, если компоненты будут передаваться напрямую, поэтому он все еще используется честно.vuexЧто ж, действительно удобно передавать данные раньше.

Использование значковiconfontБиблиотека значков Alibaba, анимация вращения средней записи используетanimationвыполнить.

Часть текстов песен получает данные песен NetEase, а затем использует стороннюю библиотеку.lyric-parserдля обработки. Реализуйте отображение текста, синхронную прокрутку текста путем перетаскивания индикатора выполнения и выделение текста в соответствии с ходом песни.

пройти черезlocalstorageХраните любимые песни и данные истории воспроизведения.

Проблема в том, что аудиотег не может автоматически воспроизводиться на мобильном терминале

На стороне компа такой проблемы нет.У меня реально голова болела от этой проблемы.Наконец-то я решил ее весьма призрачным методом(используяaddEventListenerПрослушайте событие touchend, а затем позвольте звуку воспроизвести один раз в функции обратного вызова, подробности см. в файле App.vue, а комментарии написаны).

плейлист

Отображает воспроизводимые в данный момент песни и управляет ими, может использоваться для удаления песен из списка и выбора песен для воспроизведения.

функция поиска

Реализованы функции: поиск исполнителей, плейлистов, песен, популярные запросы, регулирование данных, подтягивающее обновление и сохранение записей поиска.

Получите данные поиска с помощью API запроса ключевых слов для отображения исполнителей, плейлистов и песен.

Up-refresh реализован, потому что поиск может установить количество запрошенных данных, поэтому его можно использовать для реализации функции up-refresh.

Регулирование данных достигается с помощью функции дросселирования, черезlocalstorageХранить данные поиска.

Пользовательский центр

Данные, хранящиеся локально, будут отображаться для удобства пользователей, а позже будут добавлены дополнительные функции.

TODO

Оптимизировать скорость загрузки таблицы лидеров
Оптимизировать повторяющийся код
Добавляйте комментарии к песням
Добавить MV, функцию радио
эмм, позвольте мне подумать о дополнительных функциях

благодарный

благодарныйBinaryifyДокументация по интерфейсуNeteaseCloudMusicApiпостоянное обслуживание и обновление.
благодарныйustbhuangyiучительскийПрактическое руководство по Vue, позвольте мне узнать много знаний о vue.

Наконец

В конце, конечно, наглеть и просить еще одну звезду.Если вы считаете, что мой проект неплох, дайте звезду, чтобы его поощрить~