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

小籠包發表於2019-02-16
VueWebAPP

專案介紹

網易雲音樂介面+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中執行方式已作修改。
  • 很多功能尚未實現,很多地方待優化，歡迎提issue或建議，有時間就寫點吧.^-^

github地址，歡迎star.

相關文章