Project introduction

Netease Cloud Music interface + Vue Family Barrel to develop a mobile end music webApp

The project is still developing, so if you are interested in participating, you can do so privately

Effect:

Skeleton screen

Home page

The sidebar

Recommended daily

playlist

Player (small)

Player (large)

The detailed information

Address of the test

The development summary

The project structure

Vue – cli

The new directories are as follows:

-- SRC ------ API // directory where the API is placed ---------base.js // Place some configuration of AXIos, interface domain name address, and public parameter configuration, and background convention cross-domain configuration, Global loading configuration, etc. -- -- -- -- -- -- -- -- - urls. Js / / placed interface url -- -- -- -- -- -- -- -- - API. Js / / placed encapsulation promise request -- -- -- -- -- - base / / place some basic components -- -- -- -- -- - common ---------js // public js ---------sass // Public styleCopy the code

Use the class library

  • Fastclick solves 300ms latency on mobile

  • Vux quickly builds some regular pages

  • Vue-lazyload lazily loads images

  • Better – scroll wheel figure

  • NeteaseCloudMusicApi WY The music interface is encapsulated and forwarded by Node and deployed on its own server

Routes are loaded on demand

 const view = (path, name) => () => import(`@/components/${path}${name}New vue ({//... components: {'my-component': () => import('./my-async-component')}})Copy the code
  • Route loading uses the Transition animation component to add a switch animation
  • Note that you must use Vue Router version 2.4.0+ if you wish to use this syntax in the routing component of the Vue Router.

Player components

The miniplayer. vue and normalplayer. vue components are written separately for the miniplayer. vue and normalplayer. vue components are not put together because they want a single responsibility

  • Hide Display Manage through vuEX

  • animation

    1. The head falls and the bottom rises

       <transition name="example"> </transition> /* CSS style */ // The style is added when the first element of transition is shown or hidden // These two class names define the start to end duration and delay. Example -enter-active{ Example -leave-active{transition:all 0.4s Linear animate all 0.4s linear} // Example -enter{} // leave the end of the excessive state trigger time example-leave the next frame animation overcompletion is removed. Example -leave-to{} Example -enter-active is the time between the departure from the plane and the opening of the parachute. Example -enter is the last moment on the plane before the fall. Example -enter-to start the fall. The moment of acceleration. Example -leave-active The time between the release of the parachute and landing. Example -leave When the order to release the parachute is issuedCopy the code

    2. Player CD displacement and scaling

      First calculate the distance between the small player image and the x and y axis of the final large player CD

      Use create-keyframe-animation to register a CSS3 animation state

      Use the Transition animation method hook

      Run animation on Enter and clear animation leave on afterEnter

    3. Player rotation

      Define a rotating CSS animation, call it in a class, and give it addClss in the Play state, adding animation-play-state: paused in the pause state

The use of audio

Use HTML5 Audio and vuex to realize player functions, including progress bar, play, pause, previous song, next song, play mode and so on

layout

  • Most use flex WebPack to configure low versions of Android, ios and prefixes

  • Considering the mobile side of fixed elements, using 100% height + Absolute is more appropriate in this scenario

  • Use the media query to accommodate some style variations above 768px

  • Resize and onload listener are registered in the mounted hook of vue instance by REM

  • The skeleton screen is used to fill the blank screen of loading resources, and the rendering on the server side of the main page is to be optimized to complete

Thank you

  • vue

  • vuex

  • vue-router

  • vux

  • vue-lazyLoad

  • NeteaseCloudMusicApi

instructions

  • There is feedback that the project cannot be displayed after clone is run, because the address on my server used by the interface is access-Control-Allow-Origin, which is orgin in the request header. Therefore, it is suggested to run the Clone interface library locally, and the running mode in Github has been modified.

  • Many features are not yet implemented, many places need to be optimized, if you have time to write.^-^

Making the address.Welcome to star.