基于Taro與typescript開發的網易云音樂小程序

張利勇發布于2019-08-26 10:26 / 1550人閱讀

摘要：基于與網易云音樂開發，技術棧主要是目前主要是著重小程序端的展示，主要也是借此項目強化下上述幾個技術棧的使用，通過這個項目也可以幫助你快速使用開發一個屬于你自己的小程序地址，感興趣的話可以關注下，功能會進行持續完善快速開始首先需要在目錄下

基于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] 統一的播放組件，方便進行切換頁面后可以隨時進入到播放頁面

目錄結構簡要介紹

這里主要介紹下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，感謝大家支持

云服務器 GPU云服務器基于hadoop的海量數據存儲平臺設計與開發云開發的小程序還需要服務器嗎開發小程序的語言小程序的開發語言

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106169.html

Taro 優秀學習資源匯總

摘要：多端統一開發框架優秀學習資源匯總官方資源項目倉庫官方文檔項目倉庫官方文檔微信小程序官方文檔百度智能小程序官方文檔支付寶小程序官方文檔字節跳動小程序官方文檔文章教程不敢閱讀包源碼帶你揭秘背后的哲學從到構建適配不同端微信小程序等的應用小程序最 Awesome Taro 多端統一開發框架 Taro 優秀學習資源匯總 showImg(https://segmentfault.com/img/r...

toddmark 2019-08-23 18:02 評論0 收藏0
為微信小程序開發的網易云音樂api庫

摘要：之前我們已經開發過一款小程序適用的音樂庫，這次開發網易云音樂庫的原因是音樂庫在小程序中環境下無法使用小程序提供的背景音頻播放器播放的問題網易云的加密算法真的比其他幾家復雜太多了。。。之前我們已經開發過一款小程序適用的qq音樂api庫https://github.com/FisherWY/Q...，這次開發網易云音樂api庫的原因是qq音樂api庫在小程序中iOS環境下無法使用小程序提...

Codeing_ls 2019-08-23 17:16 評論0 收藏0
平時積累的前端資源，持續更新中。。。

本文收集學習過程中使用到的資源。持續更新中…… 項目地址 https://github.com/abc-club/f... 目錄 vue react react-native Weex typescript Taro nodejs 常用庫 css js es6 移動端微信公眾號小程序 webpack GraphQL 性能與監控高質文章趨勢動效數據結構與算法 js core 代碼規范...

acrazing 2019-08-26 10:40 評論0 收藏0
React的移動端和PC端生態圈的使用匯總

摘要：調用通過注冊表調用到實例，透過的，調用到中的，最后通過，調用，根據參數相應模塊執行。京東的，多端解決方案是一套遵循語法規范的多端開發解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術，我們不能停留在五分鐘狀態，特別喜歡一句話，用什么方式繪制UI界面一點不重要，重要的是底層的思維，解決問題和優化...

kun_jian 2019-08-02 15:28 評論0 收藏0
React的移動端和PC端生態圈的使用匯總

摘要：調用通過注冊表調用到實例，透過的，調用到中的，最后通過，調用，根據參數相應模塊執行。京東的，多端解決方案是一套遵循語法規范的多端開發解決方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 對于一項技術，我們不能停留在五分鐘狀態，特別喜歡一句話，用什么方式繪制UI界面一點不重要，重要的是底層的思維，解決問題和優化...

J4ck_Chan 2019-08-23 18:32 評論0 收藏0