Облачный музыкальный интерфейс Netease + семейная корзина vue для разработки мобильного музыкального веб-приложения

Node.js GitHub Vue.js

Введение в проект

Облачный музыкальный интерфейс Netease + семейная корзина vue для разработки мобильного музыкального веб-приложения

Проект все еще развивается, и я заинтересован в друзьях, которые хотят участвовать.

Изображение эффекта:

Скелетонный экран

титульная страница

Боковая панель

ежедневная рекомендация

список песен

игрок (маленький)

игрок (большой)

подробности

тестовый адрес

Резюме разработки

Структура проекта

сборка vue-cli

Новый каталог выглядит следующим образом:

  ---src 
  ------api        // 放置api的目录
  ---------base.js // 放置axios的一些配置，接口域名地址，以及公共参数配置，与后台约定跨域的配置，全局loading配置等
  ---------urls.js // 放置接口url 
  ---------api.js  // 放置封装的promise请求
  ------base       // 放置一些基础组件 
  ------common  
  ---------js      // 公共js 
  ---------sass    // 公共样式

Использование библиотеки классов

  • Fastclick устраняет задержку в 300 мс на мобильных устройствах

  • vux быстро создает обычные страницы

  • vue-lazyLoad лениво загружает изображения

  • лучшая прокрутка карусели

  • NeteaseCloudMusicApi с музыкальным интерфейсом, инкапсуляцией и пересылкой узлов, развернутым на собственном сервере

Маршруты загружаются по запросу

 const view = (path, name) => () => import(`@/components/${path}${name}`)// 路由按需加载
 //这边用的是vue异步组件的方式实现路由的按需加载
 new Vue({
   // ...
   components: {
     'my-component': () => import('./my-async-component')
   }
 })
  • Когда маршрут загружен, компонент анимации перехода используется для добавления анимации переключения.
  • Обратите внимание, что вы должны использовать Vue Router 2.4.0+, если хотите использовать приведенный выше синтаксис в компонентах маршрута Vue Router.

компонент игрока

Размер плеера был написан отдельноMiniPlayer.vueа такжеNormalPlayer.vueДва компонента не объединяются, потому что они хотят иметь единую ответственность.

  • Скрыть и показать управление через vuex

  • анимация

    1. Опускание головы и подъем дна

       <transition name="example">

</transition>

/*css 样式*/
// 给 transition下第一个元素显示或隐藏时添加的样式
 //这两个类名都是定义开始到结束的持续时间 方式 以及延迟
.example-enter-active{
  transition:all 0.4s linear  对所有属性执行0.4s的动画 匀速
}
.example-leave-active{
  transition:all 0.4s linear  对所有属性执行0.4s的动画 匀速
}
// 进入过度的开始状态 触发时机 元素被插入前 插入后下一帧移除
.example-enter{


}
// 离开过度的结束状态 触发时机 example-leave下一帧  动画过度完成被移除
.example-leave-to{


}

 可以使用碟中谍6中的halo跳伞来理解

 .example-enter-active就是从飞机上离开到开伞的时间

 .example-enter 下坠前在飞机上的最后一刻

 .example-enter-to  开始下坠，具备加速度的那一刻 

 .example-leave-active 开伞到着陆的时间

 .example-leave 开伞命令发出时

 .example-leave-to 伞开下一刻

    2. Смещение и масштабирование компакт-диска плеера

      Сначала вычислите расстояние между изображением маленького игрока и конечным компакт-диском большого игрока по осям x и y.

      использоватьcreate-keyframe-animationпровестиcss3Регистрация состояний анимации

      Реабилитация анимационного метода перехода

      существуетenterВремяrunанимация,afterEnterОчистить анимацию, когдаleaveпо аналогии

    3. ротация игроков

      определить повернутыйcssанимация, вclassпозвоните вplayотдать в штатaddClss,pauseдобавить когдаanimation-play-state: paused

использование аудио

использоватьhtml5изaudioкомбинироватьvuexДля реализации функций плеера, включая индикатор выполнения, воспроизведение, паузу, предыдущую песню, следующую песню, режим воспроизведения и т. д.

макет

  • Большинство из них используют flex webpack для настройки нижней версии Android с префиксом ios.

  • Принимая во внимание подвижную проблему неподвижных элементов, в этом сценарии более уместно использовать 100% высоту + абсолютное решение.

  • Используйте медиа-запросы для совместимости с некоторыми деформациями стиля выше 768 пикселей.

  • Используйте rem в экземпляре vuemountedзарегистрирован в хукеresizeа такжеonloadМонитор, ориентир вычислений внешней

  • Используйте скелетный экран, чтобы заполнить белый экран загрузки ресурсов, чтобы оптимизировать его для завершения рендеринга главной страницы на стороне сервера.

благодарный

  • vue

  • vuex

  • vue-router

  • vux

  • vue-lazyLoad

  • NeteaseCloudMusicApi

иллюстрировать

  • Есть отзывы, что после клонирования проекта он отображаться не будет, потому что для интерфейса используется адрес на моем сервере, а на стороне нодыAccess-Control-Allow-Originв заголовке запросаorgin, поэтому рекомендуетсяcloneБиблиотека интерфейса работает локально,githubРежим работы изменен.

  • Многие функции еще не реализованы, а многие места нуждаются в оптимизации.Если у вас есть время, пожалуйста, напишите их.^-^

гитхаб-адрес,Добро пожаловать звезда.

Категории