輕量級音樂播放器搭建 2

輕量級音樂播放器搭建 2

 

下面就正式開始播放器的編寫，首先輸入如下指令（須要node，npm，vue-cli等環境）初始化一個VueJs應用：

  vue init webpack gakki-fm

而後一路回車，注意安裝VueRouter。以後：

  
  cd gakki-fm
  npm install
 npm run dev

Vue應用就初始化好了，如今要作的就是對項目src目錄中的文件進行修改。首先vue應用的入口是mainjs文件，通常狀況下（Vue版本爲2.x，安裝了VueRouter），main.js文件會是如下的樣子：

其中建立了一個Vue的實例，el屬性表示這個實例掛載到id爲app的元素上。router是router: router的簡寫，表示使用VueRouter進行路由。對外暴露的組件就是App這個根組件。因此說咱們只須要修改App根組件就能夠了。那麼再來看App.vue這個根組件：

首先他的模板就是template中的內容，這裏提一下：組件會替換他的父組件中的標籤爲子組件名（模板中只容許小寫，若有大寫字符則以小寫字幕加'-'符號代替）模板。也就是說這裏的id爲app的div會替換爲Vue實例（其父組件）中的'<app>'標籤，注意是替換，而不是在標籤以內（這是固然啦，模板標籤只是一個自定義的名稱，若是保留這個標籤到html中，vue怎麼進行解析呢？）。

因此如今就是對這個app.vue文件進行修改。使用vue、react等MVVM框架開發與直接寫html有一個很大的不一樣就是MVVM框架中對組件進行開發，組件的好處之一是能夠將整個應用模塊化，另外一個好處是組件能夠複用。因此在寫到要準備修改原有app組件的時候，我想先對應用進行組件的劃分：

在三個頁面的最上位置，分別有兩個按鈕，能夠對另外的兩個頁面進行跳轉。這裏應看成爲一個組件，而後跳轉的不一樣的位置經過slot插槽來進行控制；而後下面的歌曲播放控制能夠作一個組件，由於不論什麼歌曲控制內容都是通用的。歌詞的顯示能夠做爲一個組件，方便管理等。這是第一頁的大致狀況。

對於移動端的佈局，使用flex佈局比較簡便靈活。flex佈局能夠子元素的均勻或者居中分佈，而且能夠自適應窗口。若是要使用flex佈局須要在父元素中設定display爲flex，而後再設置 justify-content: center就能夠實現子元素水平居中，最後設置 align-items: center 能夠實現子元素垂直居中。flex的核心概念是容器與軸，包括外層的父容器內層的子容器，主軸與交叉軸。flex佈局的css設置能夠由父元素統一設置，子元素也能夠單獨進行設置。父容器有兩個屬性能夠設置：justify-content 屬性用於定義子元素如何在主軸方向進行分配間距，能夠設定的值有五個，flex-start / flex-end / center / space-around / space-between。align-items 屬性用於定義在交叉軸方向上如何分配子容器間距，能夠設定的值有五種：flex-start / flex-end / center / baseline / stretch。

首先寫第一個組件，即切換顯示頁的組件，在src組員目錄中新建一個components目錄，用於儲存各個組件，而後建立head-bar組件；

  <template>
   <div id="head-bar">
    新垣結衣
   </div>
 </template>
 ​
 ​
 <script>
   export default {}
 </script>
 ​
 ​
 <style scoped>
 ​
 </style>

這樣就是一個最最基本的組件，而後咱們將app.vue中的img元素進行去除。這個時候app.vue中就只剩下了router-view這個元素了。這個元素是VueRouter的一個內置組件，表示當前路徑下的子路由。什麼意思呢？好比說當前的路由地址爲parent-path，那麼在router中定義的parent-path下面的子組件的路徑爲children-path，當路徑請求到這個children-path的時候，就會在這個router-view進行顯示。因此說咱們這裏要對router目錄下的index文件進行修改：

能夠看到，routes數組就是全部路由的集合，如今默認的是當路徑爲根路徑的時候，顯示Hello這個組件，咱們不要這個組件了，咱們須要新定義一個播放器組件，在默認的狀況下顯示。因此對index.js文件進行修改：

  
  import Vue from 'vue'
 import Router from 'vue-router'
 import MusicPlayer from '@/components/music-player/music-player'
 ​
 Vue.use(Router)
 ​
 export default new Router({
   routes: [
    {
       path: '/',
       component: MusicPlayer
    }
  ]
 })

這樣就是在默認狀況下顯示播放器組件。而後須要編輯播放器組件，播放器組件的最上方就是剛剛編寫的head-bar組件。不過在編寫的過程當中遇到了一個狀況，仍是要說一下，就是關於import引入模塊時候的路徑的問題，在最原始的時候，咱們都是寫相對路徑與絕對路徑。可是如今因爲有webpack，他能夠將代碼進行打包，因此就不須要再關注路徑的問題了，只須要進行以下的配置：再項目第一級目錄的build目錄中，找到webpack.base.conf.js，這個文件中暴露一個對象，其中有個resolve屬性，再其中有一個alias屬性，這個alias英文意思爲別名，就是說咱們能夠把經常使用的目錄在這裏定義一下別名。好比說：

  
    resolve: {
     extensions: ['.js', '.vue', '.json'],
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
       '@': resolve('src'),
       'assets': resolve('src/assets'),
       'components': resolve('src/components'),
    }
  },

好了不羅嗦了，回到剛纔的話題，music-player.vue如今以下：

  
  <template>
   <div>
     <header-bar></header-bar>
   </div>
 </template>
 ​
 ​
 <script>
   import HeaderBar from 'components/header-bar/header-bar'
   export default {
     components: {
       HeaderBar
    }
  }
 </script>

能夠看到，首先須要在MusicPlayer中進行引入所要用到的子組件HeaderBar，引入以後須要在這個組件中進行註冊，此處使用了ES6的簡寫語法，能夠只寫一個HeaderBar。而後就是在模板當中進行使用。在使用組件的時候，標籤名不可以有大寫字母，因此這裏的標籤名爲header-bar。而後在瀏覽器中就能夠看到效果了。固然這只是一個最簡短的示例，下面對MusicPlayer這個頁面進行編寫：

 

 

參考網易雲音樂與豆瓣FM（好久以前的，說實話如今版本的UI設計真的很難看）的樣式，除了以前寫的有個header-bar，中間部分就是顯示歌曲專輯封面的，這裏其實能夠作成一個組件，也能夠不作。可是若是作成豆瓣FM這樣的，豆瓣的設計的挺有意思，他讓滾動條把圖片包圍起來了，這樣顯得很是簡潔。我想作成這個樣子的，可是這個看起來並很差作。可能有這樣的插件或者CSS3，可是如今我也很差說。（時間過了十分鐘後）好像找到了一個。而後就是下邊的播放控制，這裏固然是要製做一個組件。

因此目前的播放器頁面大致上分爲三個部分：

  
  <template>
   <div class="music-player">
     <header-bar></header-bar>
     <div class="mid">
       <img src="../../assets/logo.png">
     </div>
     <music-controller></music-controller>
   </div>
 </template>
 ​
 ​
 <script>
   import HeaderBar from 'components/header-bar/header-bar'
   import MusicController from 'components/music-controller/music-controller'
   export default {
     components: {
       HeaderBar,
       MusicController
    }
  }
 </script>

其中中間的div用於顯示專輯封面與圓圈型的進度條。這裏有一點要提醒，雖然以前已經配好了webpack的resolve的alias，可是在模板中的資源等路徑是不能使用這個alias代替的。alias只能簡化模塊引入時的路徑。

爲了‘節約資源’，除非特殊狀況，我就不對css進行解釋了。

到此爲止，就要考慮如下怎麼來播放歌曲了。首先，當用戶來到music-player這個組件的時候，也就是組件created的時候，要向後端服務器發送請求，此時用戶沒有登錄，因此應當播放默認或者是隨機推薦的頻道。這時就有個問題，發送請求是得到一個歌單列表呢仍是或者一首歌的信息呢？這裏我原本想着本身搭後端來進行請求，可是太懶了，因而仍是使用網易雲音樂的API。雖然有了API，找到個合適的藉口也不容易，最終我看着推薦新音樂這裏感受不錯，接口url爲/personalized/newsong。可是有個問題是網易雲音樂沒有無限制的在未登陸的狀況下這樣不斷的獲取歌單。像是私人FM什麼的都是須要登錄的，因此剛纔的問題有答案了，默認播放一下獲取一個列表。

 

參考連接：

1. flex佈局

2. 進度條插件

3. 網易雲音樂接口說明gitbook