網易雲音樂接口+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.