基於Taro與typescript開發的網易雲音樂小程式(持續更新)
阿新 • • 發佈:2019-09-03
基於
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
功能列表
- [x] 使用者登陸
- [x] 退出登陸
- [x] 我的關注列表
- [x] 我的粉絲列表
- [ ] 我的動態列表
- [x] 最近播放列表
- [ ] 我的電臺
- [ ] 我的收藏
- [x] 推薦歌單
- [x] 推薦電臺
- [x] 推薦電臺
- [x] 我建立的歌單列表
- [x] 我收藏的歌單列表
- [x] 共用的歌單詳情列表
- [x] 歌曲播放頁面
- [x] 歌詞滾動
- [x] 歌曲切換播放模式(隨機播放/單曲迴圈/順序播放)
- [x] 切換上一首/下一首
- [x] 喜歡/取消喜歡某首歌曲
- [x] 視訊播放
- [ ] 評論列表
- [x] 統一的播放元件,方便進行切換頁面後可以隨時進入到播放頁面
目錄結構簡要介紹
這裡主要介紹下
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
重構部分功能
最近更新
- 加入搜尋功能(有待進一步完善)
- 加入了視訊搜尋以及播放(有待進一步完善)
- 加入了mv搜尋以及播放(有待進一步完善)
效果圖預覽
下面簡要列出幾張效果圖
有待完善部分
還有一些功能點以及細節都還有待進一步完善,目前先把大致主要的功能進行了下實現,當然如果發現什麼問題,歡迎能夠提交issues
,發現之後我會及時進行更正,歡迎 star
和 fork
,感謝大家支援