🎵 Один основан наReactРазработано музыкальное приложение для ПК.
Поддерживает системы Mac и Windows.ссылка на скачивание
Проект использует электрон в качестве оболочки и webpack в качестве инструмента для упаковки.Основные технологии включают React + Redux + React-router v4 + antd, который просто реализует базовые функции музыкального плеера.
проектирование структуры проекта
|
|—— config // 打包配置
|—— mock // 模拟数据
|—— resource // 一些打包使用到的资源文件
└── src
├── main // 主进程
└── renderer // 渲染进程
├── actions
├── api // 接口
├── assets // 公用静态资源
├── components // redux展示组件
├── containers // redux容器组件
└── reducers
ключевые технические моменты
- Инженерный режим массового производства перечисляет компоненты «высшего порядка»
через общую фабричную функциюconnectListHoc, и определите соответствующие спецификации интерфейса и параметров, чтобы реактивные компоненты можно было массово производить в других местах, используя эту функцию для решения проблемы повторного использования аналогичных компонентов.
// define
export function connectListHoc ({
className,
stateName,
playIcon = false,
getAllData,
itemOnClick
}, ListItemRender) {
return '...'
}
// how to use
export default connectListHoc({...})
- Лирический интерфейс Размытие по Гауссу
Ядром является свойство фильтра css3.Поскольку у этого свойства есть определенные требования к производительности, при использовании этого свойства значение px не может быть установлено слишком большим. Первоначальный замысел заключается в использовании очень сильного эффекта размытия, что не является большой проблемой на стороне Mac, но обнаружено, что это вызовет отставание в Windows с более низкой конфигурацией. Окончательное решение состояло в том, чтобы настроить 2 div, первый для размытого фонового изображения и второй для текста, который не был размыт (при использовании полупрозрачной черной маски, чтобы избежать цветовых конфликтов).
.background {
position: absolute;
height: 100%;
width: 100%;
background-color: @background-color; /* 图片未加载出来时 */
filter: blur(15px);
}
.content {
height: 100%;
background-color: rgba(0, 0, 0, .5);
}
- Использование промежуточного программного обеспечения redux с обещаниями
- упаковка по запросу ant-design в сочетании с пользовательскими шаблонами реагирования
- Перетащите местные песни для воспроизведения
- Связь между основным процессом и процессом рендеринга
Screenshot
Проект включает в себя несколько основных страниц, которые реализованы внутри с помощью маршрутизации, Среди них мой плейлист и личный мюзик-холл должны быть зарегистрированы, чтобы быть видимыми.
Вот, большое спасибоNeteaseCloudMusicApiпредоставляемый API.
Это личный послеобеденный проект и практический процесс стека технологий React. В проекте еще много областей для улучшения, например, действия Redux не были хорошо модульными, из-за использования муравьиного дизайна не хватает компонентов отображения для разделения, а интерфейс относительно грубый. В то же время электрон не получил глубокой разработки на данном этапе.Видно, что в интерфейсе входа в систему непосредственно принят метод веб-модальной реализации для интерфейса.Это проблемы, которые необходимо решить в последующее развитие.
Last
адрес проекта:GitHub.com/Да что там/Имус…