taro-music

На основе Taro и API веб-сервиса NetEase Cloud Music разработана программа, в которой используется стек технологий: typescript + taro + taro-ui + redux + react-hooks. В настоящее время основное внимание уделяется демонстрации на мобильных устройствах. Также этот проект позволяет усилить использование упомянутого стека технологий и создать наилучшую практику. С помощью этого проекта вы сможете быстро создать собственную программу с использованием Taro. Проект будет постоянно обновляться. Следите за обновлениями и ставьте звёздочки!

Быстрый старт

Внимание!

В настоящее время происходит миграция на taro3. Заинтересованные могут перейти на ветку [feature_upgrade_taro3.0] для просмотра. Большинство страниц уже работают нормально, но некоторые детали ещё требуют доработки.

Версия taro обновлена до последней версии 2.1.5. Убедитесь, что ваша локальная версия taro-cli также обновлена. Вы можете проверить версию с помощью команды taro info. Если это не последняя версия, вы можете обновить cli и зависимости проекта с помощью команд taro update self (для macOS или Linux перед выполнением необходимо добавить sudo) и taro update project. В противном случае проект не будет работать должным образом. Для получения дополнительной информации см. раздел «Taro: среда и проверка зависимостей» на сайте Taro Docs.

Важно!

Теперь доступна версия taro 3.0. Этот проект ещё не адаптирован к ней, поэтому при установке @tarojs/cli необходимо обратить внимание на номер версии. Убедитесь, что выполняемые команды верны.

  Если у вас уже установлена другая версия @tarojs/cli, сначала удалите её глобально, а затем выполните следующие команды:
  npm uninstall -g @tarojs/cli
  rm -rf node_modules
  ---------------
  Первый шаг
  npm install -g @tarojs/cli@2.1.5
  или
  cnpm install -g @tarojs/cli@2.1.5
  или
  yarn global add @tarojs/cli@2.1.5

  Второй шаг
  npm install
  или
  cnpm install
  или
  yarn

Сначала создайте файл config.ts в каталоге src. Это позволит вам заменить его на адрес вашей линии связи в соответствии с вашими потребностями. Используемый здесь API — это NeteaseCloudMusicApi.

export const baseUrl: string = 'http://localhost:3000' // Здесь задаётся URL запроса к серверу. В примере порт сервера равен 3000. При желании протестировать на реальном устройстве, необходимо развернуть сервер на облачном хостинге.

Перед запуском этого проекта убедитесь, что вы установили Taro глобально. Инструкции по установке можно найти на официальном сайте.

Запустите серверный API:

git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git

cd NeteaseCloudMusicApi

npm i

npm run start

Затем запустите клиентский проект:

git clone https://github.com/lsqy/taro-music.git

cd taro-music

npm i

npm run dev:weapp

Список функций

• Вход пользователя
• Выход из системы
• Мой список подписок
• Мои поклонники
• Мой список историй
• Недавно воспроизведённые треки
• Моя радиостанция
• Мои коллекции
• Рекомендуемые плейлисты
• Рекомендованные радиостанции
• Рекомендованная радиостанция
• Список моих плейлистов
• Список моих коллекций
• Детали общего плейлиста
• Страница воспроизведения трека
• Лирика прокрутки
• Режимы воспроизведения треков (случайное воспроизведение / одиночный цикл / последовательное воспроизведение)
• Предыдущий / следующий трек
• Нравится / не нравится трек
• Комментарии
• Воспроизведение видео
• Горячие поиски
• Поиск (включая треки / плейлисты / видео / исполнителей / альбомы / радиостанции / пользователей)
• Общий компонент воспроизведения, позволяющий легко переходить на страницу воспроизведения

Структура каталогов

Здесь представлена основная информация о каталоге src, поскольку разработка ведётся в основном в этом каталоге.

- src
 - actions // Действия redux выполняются здесь
 - assets // Статические ресурсы, включая изображения и значки fontawesome
 - components // Повторно используемые компоненты проекта. В настоящее время только CLoading (компонент загрузки), CLyric (компонент лирики), CMusic (воспроизводящий компонент), CSlide (компонент слайда), CTitle, CUserListItem
 - constants // Определения констант проекта, включая определения типов машинописного текста, определения редукторов и определения кодов состояния
 - pages // Бизнес-страницы проекта
 - reducers // Синхронные операции redux выполняются здесь
 - services // Повторно используемый сервисный код. В настоящее время он содержит только общий код запросов API. Другие службы могут быть добавлены в соответствии с потребностями проекта.
 - store // Файл инициализации redux
 - utils // Повторно используемые методы утилит. В настоящее время включает только методы форматирования и анализа лирики
  - decorators // Декораторы, которые используются для решения проблемы сохранения состояния воспроизведения после перехода на другую страницу. В настоящее время taro не поддерживает глобальные компоненты.
 - app.scss // Глобальный стиль
 - app.tsx // Глобальная точка входа
 - base.scss // Базовый стиль
 - config.ts // Конфигурация проекта. В настоящее время задана только базовая конфигурация URL-адреса запроса.

Задачи

• Повторно используемый список комментариев
• Функция поиска частично реализована
• Поддержка перехода на личную домашнюю страницу
• Страница исполнителя
• Рефакторинг части кода с использованием react-hooks, работа продолжается

Последние обновления

• Функция поиска
• Видеопроигрыватель
• Проигрыватель MV
• Комментатор в видео и MV

Примеры изображений

Ниже приведены несколько примеров изображений.