成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

基于Taro與typescript開發(fā)的網(wǎng)易云音樂小程序

張利勇 / 1561人閱讀

摘要：基于與網(wǎng)易云音樂開發(fā)，技術(shù)棧主要是目前主要是著重小程序端的展示，主要也是借此項(xiàng)目強(qiáng)化下上述幾個(gè)技術(shù)棧的使用，通過這個(gè)項(xiàng)目也可以幫助你快速使用開發(fā)一個(gè)屬于你自己的小程序地址，感興趣的話可以關(guān)注下，功能會(huì)進(jìn)行持續(xù)完善快速開始首先需要在目錄下

基于Taro與網(wǎng)易云音樂api開發(fā)，技術(shù)棧主要是：typescript+taro+taro-ui+redux,目前主要是著重小程序端的展示，主要也是借此項(xiàng)目強(qiáng)化下上述幾個(gè)技術(shù)棧的使用，通過這個(gè)項(xiàng)目也可以幫助你快速使用Taro開發(fā)一個(gè)屬于你自己的小程序～

github地址：taro-music，感興趣的話可以star關(guān)注下，功能會(huì)進(jìn)行持續(xù)完善

快速開始

首先需要在src目錄下創(chuàng)建一個(gè)config.ts,可以根據(jù)自己的需要將其替換成線上地址，接口服務(wù)是使用的NeteaseCloudMusicApi

export const baseUrl: string = "http://localhost:3000" // 這里的配置的這個(gè)url是后端服務(wù)的請求地址

在運(yùn)行本項(xiàng)目前，請先確保已經(jīng)全局安裝了Taro，安裝可見官網(wǎng)指導(dǎo)

啟動(dòng)后端接口服務(wù)

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

cd NeteaseCloudMusicApi

npm i

npm run start

接下來啟動(dòng)前端項(xiàng)目

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

cd taro-music

npm i

npm run dev:weapp
功能列表

[x] 用戶登陸

[x] 退出登陸

[x] 我的關(guān)注列表

[x] 我的粉絲列表

[ ] 我的動(dòng)態(tài)列表

[x] 最近播放列表

[ ] 我的電臺(tái)

[ ] 我的收藏

[x] 推薦歌單

[x] 推薦電臺(tái)

[x] 推薦電臺(tái)

[x] 我創(chuàng)建的歌單列表

[x] 我收藏的歌單列表

[x] 共用的歌單詳情列表

[x] 歌曲播放頁面

[x] 歌詞滾動(dòng)

[x] 歌曲切換播放模式（隨機(jī)播放/單曲循環(huán)/順序播放）

[x] 切換上一首/下一首

[x] 喜歡/取消喜歡某首歌曲

[ ] 評論列表

[x] 統(tǒng)一的播放組件，方便進(jìn)行切換頁面后可以隨時(shí)進(jìn)入到播放頁面

目錄結(jié)構(gòu)簡要介紹 
這里主要介紹下src目錄，因?yàn)殚_發(fā)主要是在這個(gè)目錄下進(jìn)行的
- src
 - actions // `redux`中的相關(guān)異步操作在這里進(jìn)行
 - assets // 靜態(tài)資源目錄，這里引入了所需的圖片資源，以及`fontawesome`字體圖標(biāo)資源
 - components // 封裝的項(xiàng)目中可復(fù)用的組件，目前只是抽象了`CLoading`(加載效果組件)、`CLyric`(歌詞組件)、`CMusic`(正在播放組件)、`CSlide`(滑塊組件)、`CTitle`、`CUserListItem`
 - constants // 項(xiàng)目中的常量定義，目前定義了`typescript`的公共定義、`reducers`的名稱定義、狀態(tài)碼的定義
 - pages // 項(xiàng)目中的業(yè)務(wù)頁面都在這個(gè)目錄中
 - reducers // `redux`中的相關(guān)同步操作在這里進(jìn)行
 - services // 可復(fù)用的服務(wù)可以放在這個(gè)目錄中，目前只是封裝了接口請求的公共服務(wù)，可以根據(jù)自己項(xiàng)目的需要進(jìn)行其他服務(wù)的擴(kuò)充
 - store // redux的初始文件
 - utils // 可以復(fù)用的工具方法可以放到這個(gè)目錄當(dāng)中，目前封裝了格式化、歌詞解析的相關(guān)方法
  - decorators // 抽象的裝飾器，主要為了解決在切換頁面之后仍然可以繼續(xù)保持播放狀態(tài)，因?yàn)槟壳癭taro`不支持全局組件
 - app.scss // 全局樣式
 - app.tsx // 全局入口文件
 - base.scss // 基礎(chǔ)樣式
 - config.ts // 項(xiàng)目的全局配置，目前只是配置了`baseUrl`是后端服務(wù)的基準(zhǔn)請求地址
todo

復(fù)用的評論列表

搜索功能

react-hooks重構(gòu)部分功能

最近更新

加入搜索功能（有待進(jìn)一步完善）

加入了視頻播放（有待進(jìn)一步完善）

效果圖預(yù)覽 
下面簡要列出幾張效果圖

有待完善部分

還有一些功能點(diǎn)以及細(xì)節(jié)都還有待進(jìn)一步完善，目前先把大致主要的功能進(jìn)行了下實(shí)現(xiàn)，當(dāng)然如果發(fā)現(xiàn)什么問題，歡迎能夠提交issues,發(fā)現(xiàn)之后我會(huì)及時(shí)進(jìn)行更正,歡迎 star 和 fork，感謝大家支持

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106169.html

相關(guān)文章

  • Taro 優(yōu)秀學(xué)習(xí)資源匯總

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

    toddmark 評論0 收藏0

  • 為微信小程序開發(fā)的網(wǎng)易云音樂api庫

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

    Codeing_ls 評論0 收藏0

  • 平時(shí)積累的前端資源，持續(xù)更新中。。。

    本文收集學(xué)習(xí)過程中使用到的資源。 持續(xù)更新中…… 項(xiàng)目地址 https://github.com/abc-club/f... 目錄 vue react react-native Weex typescript Taro nodejs 常用庫 css js es6 移動(dòng)端 微信公眾號 小程序 webpack GraphQL 性能與監(jiān)控 高質(zhì)文章 趨勢 動(dòng)效 數(shù)據(jù)結(jié)構(gòu)與算法 js core 代碼規(guī)范...

    acrazing 評論0 收藏0

  • React的移動(dòng)端和PC端生態(tài)圈的使用匯總

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

    kun_jian 評論0 收藏0

  • React的移動(dòng)端和PC端生態(tài)圈的使用匯總

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

    J4ck_Chan 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<