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. 直接訪問http://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. 歌詞頁面