網易雲音樂介面+vue全家桶開發一款移動端音樂webApp

專案介紹

網易雲音樂介面+vue全家桶開發一款移動端音樂webApp

專案還在develop中，感興趣想要參與的小夥伴可以私我

效果圖：

詳細資訊

測試地址

開發總結

專案結構

vue-cli搭建

新增目錄如下：

  ---src 
  ------api        // 放置api的目錄
  ---------base.js // 放置axios的一些配置，介面域名地址，以及公共引數配置，與後臺約定跨域的配置，全域性loading配置等
  ---------urls.js // 放置介面url 
  ---------api.js  // 放置封裝的promise請求
  ------base       // 放置一些基礎元件 
  ------common  
  ---------js      // 公共js 
  ---------sass    // 公共樣式 
複製程式碼

類庫使用

• fastclick解決移動端300ms延遲

• vux 快速構建一些常規頁面

• vue-lazyLoad 對圖片進行懶載入處理

• better-scroll 輪播圖

• NeteaseCloudMusicApi wy音樂介面，node封裝轉發，部署在自己伺服器上

路由按需載入

 const view = (path, name) => () => import(`@/components/${path}${name}`)// 路由按需載入
 //這邊用的是vue非同步元件的方式實現路由的按需載入
 new Vue({
   // ...
   components: {
     'my-component': () => import('./my-async-component')
   }
 })

複製程式碼

• 路由載入時用了transition動畫元件新增了一個切換動畫
• 注意如果你希望在 Vue Router 的路由元件中使用上述語法的話，你必須使用 Vue Router 2.4.0+ 版本。

播放器元件

大小播放器分別寫了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. 播放器的cd的位移及縮放

     先計算出小播放器圖片離最終大播放器cd的x,y軸上的距離

     使用 create-keyframe-animation 進行一個css3動畫狀態的註冊

     再利用transition的動畫方法鉤子

     在enter時run動畫,afterEnter時清除動畫 leave同理

  3. 播放器的旋轉

     定義一個旋轉的css動畫，在一個class中進行呼叫，在play的狀態下給它addClss,pause時加上animation-play-state: paused

audio的使用

使用html5的 audio結合vuex來進行播放器功能的實現，包括進度條，播放，暫停，上一曲，下一曲，播放模式等

佈局

• 絕大多數使用了flex webpack中配置低版本安卓，ios加字首

• 考慮到fixed元素的移動端問題，在這種場景下，使用100%高度+absolute方案更適合

• 使用媒體查詢，相容一下某些樣式在768px以上的樣式變形

• 使用rem 在vue例項的mounted的鉤子裡註冊resize和onload監聽，進行最外層rem基準的計算

• 使用骨架屏進行載入資源白屏時填充，待優化至完全的主頁面服務端渲染

感謝

• vue

• vuex

• vue-router

• vux

• vue-lazyLoad

• NeteaseCloudMusicApi

說明

• 有反饋說專案clone之後執行，會顯示不了，因為介面用的我伺服器上的地址，node端的是Access-Control-Allow-Origin是請求頭裡的orgin,所以建議clone介面庫到本地執行，github中執行方式已作修改。

• 很多功能尚未實現,很多地方待優化，有時間就寫點吧.^-^

github地址，歡迎star.