資訊專欄INFORMATION COLUMN
摘要：概述項目是基于，成品是一個移動端的音樂播放器，來源于的實戰課程。播放器是全局組件，放在下面，通過傳遞數據，觸發提交，從而使播放器開始工作。將請求的數據格式化后再通過傳遞，組件間共享，實現歌曲的播放切換等。
概述
項目是基于Vue.js，成品是一個移動端的音樂播放器，來源于imooc的實戰課程。自己動手實踐并加以修改拓展。
項目的大致流程是Vue-cli構建開發環境，分析需求，設計構思，規劃目錄結構，開始編碼。
數據來源推薦頁
歌手頁
歌手詳情
歌曲排行榜
排行榜詳情
搜索頁
用戶中心
所有數據都來自于QQ音樂，抓取自QQ的接口，大部分接口都是JSONP，抓取比較容易，其中一些接口限制了host，不能直接抓取，采用的方法是用axios代理，設置header，以此繞過host的限制。
PS：具體代碼請看prod.server.js文件
src目錄結構 難點 player組件Vue
Vuex
Vue-Router
Vue-cli
Stylus
Axios
ESlint
Better-scroll
講一講player 播放器組件，播放器組件可謂是整個項目的核心，當然數據處理和用戶體驗方面也是不簡單的（逃。
播放器是全局組件，放在App.vue下面，通過Vuex傳遞數據，觸發action提交mutation，從而使播放器開始工作。當然，其中的數據交互說復雜也不是很復雜，就是要花多點時間理解，player組件由多個基礎組件構成，具體請看項目代碼，下面上圖
為了防止切換歌曲時點擊速度過快導致歌曲播放錯誤，使用了audio的onplayAPI，結合Vuex獲取到數據，判斷當前歌曲數據請求到才可以切換下一首歌曲，判斷函數如下
ready() {
this.songReady = true
}
數據處理
通過調用QQ音樂的JSONP接口，獲取的數據并不能直接拿來用，需要做進一步的規格化，達到我們使用的要求，所以在這方面多帶帶封裝了一個class來處理這方面的數據，具體請看src/common/js/song.js
在請求JSONP的時候，用到了一個JSONP庫，這個庫代碼十分簡短，只有幾十行，有興趣的同學可以學習下。
使用時，就是將請求的參數拼接在請求url上，然后調用這個庫的jsonp方法。所以，在此封裝了兩個函數，一個是將參數拼接在url上，另一個是將庫里面的jsonp方法Promise化，方便我們使用，具體請查看src/common/js/jsonp.js。
將請求的數據格式化后再通過Vuex傳遞，組件間共享，實現歌曲的播放切換等。
交互體驗該項目的很多地方都涉及到滾動，包括下拉滾動，下拉滾動刷新等。這里面用到了一個庫(better-scroll)，來實現所有涉及到的滾動，建議學習下它的API。
其他動畫包括了Vue的transition動畫，路由之間切換時的簡單動畫，播放器打開時的動畫，這個地方比較難，也比較好玩。
打開頁面時的加載Loading效果，其實就是一個Loading組件，也比較簡單。
為了減少流量，圖片加載使用了懶加載的方式，滾動時再加載真實的圖片。
具體效果請自身體驗：）
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # run e2e tests npm run e2e # run all tests npm test生產環境
# build for production with minification npm run build # run node prod.server.js總結
通過學習該項目，自己收獲了許多，實踐中也遇到了大大小小許多問題，通過斷點調試等最終解決了，對我來說無疑是最大的鼓勵，也希望能與大家一起學習。
項目地址：https://github.com/k-water/vue-music
喜歡的點個贊
完 ：）
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84444.html
摘要：前言本文的前身是源自上的項目但由于該項目上次更新時間為年月日，很多內容早已過期或是很多近期優秀組件未被收錄，所以小肆今天重新更新了內容并新建項目。提交的項目格式如下項目名稱子標題相關介紹如果收錄的項目有錯誤，可以通過反饋給小肆。 前言 本文的前身是源自github上的項目awesome-github-vue,但由于該項目上次更新時間為2017年6月12日，很多內容早已過期或是很多近期優...
摘要：基于等開發一款移動端音樂，界面參考了安卓版的網易云音樂布局適配常見移動端。圖標使用阿里巴巴圖標庫，中間的唱片旋轉動畫使用了實現。搜索功能實現功能搜索歌手歌單歌曲熱門搜索數據節流上拉刷新保存搜索記錄。 基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等開發一款移動端音樂 WebApp，UI ...
閱讀 3616·2021-11-24 09:39
閱讀 2546·2021-11-15 11:37
閱讀 2211·2021-11-11 16:55
閱讀 5154·2021-10-14 09:43
閱讀 3703·2021-10-08 10:05
閱讀 3006·2021-09-13 10:26
閱讀 2327·2021-09-08 09:35
閱讀 3535·2019-08-30 15:55
