基於Taro與typescript開發的網易雲音樂小程序(持續更新）

基於Taro與網易雲音樂api開發，技術棧主要是：typescript+taro+taro-ui+redux,目前主要是着重小程序端的展現，主要也是藉此項目強化下上述幾個技術棧的使用，經過這個項目也能夠幫助你快速使用Taro開發一個屬於你本身的小程序～

github地址：taro-music，感興趣的話能夠star關注下，功能會進行持續完善

快速開始

首先須要在src目錄下建立一個config.ts,能夠根據本身的須要將其替換成線上地址，接口服務是使用的NeteaseCloudMusicApi

export const baseUrl: string = 'http://localhost:3000' // 這裏的配置的這個url是後端服務的請求地址

複製代碼

在運行本項目前，請先確保已經全局安裝了Taro，安裝可見官網指導

啓動後端接口服務

git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git

cd NeteaseCloudMusicApi

npm i

npm run start

接下來啓動前端項目

git clone https://github.com/lsqy/taro-music.git

cd taro-music

npm i

npm run dev:weapp

複製代碼

功能列表

• 用戶登錄
• 退出登錄
• 個人關注列表
• 個人粉絲列表
• 個人動態列表
• 最近播放列表
• 個人電臺
• 個人收藏
• 推薦歌單
• 推薦電臺
• 推薦電臺
• 我建立的歌單列表
• 我收藏的歌單列表
• 共用的歌單詳情列表
• 歌曲播放頁面
• 歌詞滾動
• 歌曲切換播放模式（隨機播放/單曲循環/順序播放）
• 切換上一首/下一首
• 喜歡/取消喜歡某首歌曲
• 評論列表
• 統一的播放組件，方便進行切換頁面後能夠隨時進入到播放頁面

目錄結構簡要介紹

這裏主要介紹下src目錄，由於開發主要是在這個目錄下進行的

- src
 - actions // `redux`中的相關異步操做在這裏進行
 - assets // 靜態資源目錄，這裏引入了所需的圖片資源，以及`fontawesome`字體圖標資源
 - components // 封裝的項目中可複用的組件，目前只是抽象了`CLoading`(加載效果組件)、`CLyric`(歌詞組件)、`CMusic`(正在播放組件)、`CSlide`(滑塊組件)、`CTitle`、`CUserListItem`
 - constants // 項目中的常量定義，目前定義了`typescript`的公共定義、`reducers`的名稱定義、狀態碼的定義
 - pages // 項目中的業務頁面都在這個目錄中
 - reducers // `redux`中的相關同步操做在這裏進行
 - services // 可複用的服務能夠放在這個目錄中，目前只是封裝了接口請求的公共服務，能夠根據本身項目的須要進行其餘服務的擴充
 - store // redux的初始文件
 - utils // 能夠複用的工具方法能夠放到這個目錄當中，目前封裝了格式化、歌詞解析的相關方法
  - decorators // 抽象的裝飾器，主要爲了解決在切換頁面以後仍然能夠繼續保持播放狀態，由於目前`taro`不支持全局組件
 - app.scss // 全局樣式
 - app.tsx // 全局入口文件
 - base.scss // 基礎樣式
 - config.ts // 項目的全局配置，目前只是配置了`baseUrl`是後端服務的基準請求地址

複製代碼

todo

• 複用的評論列表
• 搜索功能
• react-hooks重構部分功能

最近更新

• 加入搜索功能（有待進一步完善）
• 加入了視頻播放（有待進一步完善）

---

效果圖預覽

下面簡要列出幾張效果圖

• 個人頁面

  
  
  
  
  

• 登錄頁面

  
  
  
  
  

• 推薦歌單

  
  
  
  
  

• 歌單詳情

  
  
  
  
  

• 正在播放列表

  
  
  
  
  

• 歌曲播放

  
  
  
  
  

• 歌詞顯示

  
  
  
  
  

• 最近播放

  
  
  
  
  

• 關注列表

  
  
  
  
  

• 粉絲列表

  
  
  
  
  

有待完善部分

還有一些功能點以及細節都還有待進一步完善，目前先把大體主要的功能進行了下實現，固然若是發現什麼問題，歡迎可以提交issues,發現以後我會及時進行更正,歡迎 star 和 fork，感謝你們支持🙏。

文章首發自我的博客基於Taro與typescript開發的網易雲音樂小程序