React全家桶開發仿QQ音樂WebApp

前言

因為之前工作的原因先學習了Vue.js，但一直對React.js都比較感興趣，特別是React Native，對於跨平臺的方案想學習下如何去開發。而且公司也在開始逐漸使用RN來結合原生APP進行開發，但不是很急，所以還是打算先學下React.js。

介面主要參考QQ音樂的介面來開發，資料來源也是使用QQ音樂的api，大部分介面通過JSONP來訪問，其中獲取歌單詳情和獲取歌曲歌詞兩個介面需要通過後端代理轉發來實現，此處使用Node進行了簡單的開發。

原始碼

Talk is cheap. Show me the code.

線上訪問

1. 直接訪問music.tdon.site(PC訪問時請開啟除錯，使用手機模式訪問，效果更佳)

2. 手機掃碼直接訪問

   

技術棧

React.js + React-Router + Redux + ES6 + Webpack

執行專案

git clone https://github.com/XNAL/listen-music.git

cd listen-music

npm install

node proxyServer.js  // (獲取歌單和歌詞使用Node進行代理轉發)

npm start

// 訪問 http://localhost:3000
複製程式碼

效果圖

1. 推薦

   

2. 歌手

   

3. 歌手詳情

   

4. 排行榜

   

5. 排行榜詳情

   

6. 搜尋

   

7. 搜尋結果

   

8. 播放頁面

   

9. 歌詞頁面