基於Taro與typescript開發的網易雲音樂小程序

基於Taro與網易雲音樂api開發,技術棧主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是藉此項目強化下上述幾個技術棧的使用

源碼地址如下:taro-music <!--more-->

快速開始

首先需要在src目錄下創建一個config.ts,可以根據自己的需要將其替換成線上地址,接口服務是使用的NeteaseCloudMusicApi

export const baseUrl: string = 'http://localhost:3000'
在運行本項目前,請先確保已經全局安裝了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

功能列表

  • [x] 用戶登陸
  • [x] 退出登陸
  • [x] 我的關注列表
  • [x] 我的粉絲列表
  • [ ] 我的動態列表
  • [x] 最近播放列表
  • [ ] 我的電臺
  • [ ] 我的收藏
  • [x] 推薦歌單
  • [x] 推薦電臺
  • [x] 推薦電臺
  • [x] 我創建的歌單列表
  • [x] 我收藏的歌單列表
  • [x] 共用的歌單詳情列表
  • [x] 歌曲播放頁面
  • [x] 歌詞滾動
  • [x] 歌曲切換播放模式(隨機播放/單曲循環/順序播放)
  • [x] 切換上一首/下一首
  • [x] 喜歡/取消喜歡某首歌曲
  • [ ] 評論列表
  • [x] 統一的播放組件,方便進行切換頁面後可以隨時進入到播放頁面

todo

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

效果圖預覽

下面簡要列出幾張效果圖
  • 登陸頁面

  • 我的頁面

  • 推薦歌單

  • 歌單詳情

  • 正在播放列表

  • 歌曲播放

  • 歌詞顯示

  • 最近播放

  • 關注列表

  • 粉絲列表

有待完善部分

還有一些功能點以及細節都還有待進一步完善,目前先把大致主要的功能進行了下實現,當然如果發現什麼問題,歡迎能夠提交issues,發現之後我會及時進行更正,歡迎 starfork,感謝大家支持🙏。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章