基于Taro与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可以帮助你快速使用Taro开发一个属于你自己的小程序~

github地址:taro-music,感兴趣的话可以star关注下,功能会进行持续完善

快速开始

首先需要在src目录下创建一个config.ts,可以根据自己的需要将其替换成线上地址,接口服务是使用的NeteaseCloudMusicApi

  1. export const baseUrl: string = 'http://localhost:3000' // 这里的配置的这个url是后端服务的请求地址

在运行本项目前,请先确保已经全局安装了Taro,安装可见官网指导

  1. 启动后端接口服务
  2. git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git
  3. cd NeteaseCloudMusicApi
  4. npm i
  5. npm run start
  6. 接下来启动前端项目
  7. git clone https://github.com/lsqy/taro-music.git
  8. cd taro-music
  9. npm i
  10. npm run dev:weapp

功能列表

  • [x] 用户登陆
  • [x] 退出登陆
  • [x] 我的关注列表
  • [x] 我的粉丝列表
  • [ ] 我的动态列表
  • [x] 最近播放列表
  • [ ] 我的电台
  • [ ] 我的收藏
  • [x] 推荐歌单
  • [x] 推荐电台
  • [x] 推荐电台
  • [x] 我创建的歌单列表
  • [x] 我收藏的歌单列表
  • [x] 共用的歌单详情列表
  • [x] 歌曲播放页面
  • [x] 歌词滚动
  • [x] 歌曲切换播放模式(随机播放/单曲循环/顺序播放)
  • [x] 切换上一首/下一首
  • [x] 喜欢/取消喜欢某首歌曲
  • [ ] 评论列表
  • [x] 统一的播放组件,方便进行切换页面后可以随时进入到播放页面

目录结构简要介绍

这里主要介绍下src目录,因为开发主要是在这个目录下进行的

  1. - src
  2. - actions // `redux`中的相关异步操作在这里进行
  3. - assets // 静态资源目录,这里引入了所需的图片资源,以及`fontawesome`字体图标资源
  4. - components // 封装的项目中可复用的组件,目前只是抽象了`CLoading`(加载效果组件)、`CLyric`(歌词组件)、`CMusic`(正在播放组件)、`CSlide`(滑块组件)、`CTitle`、`CUserListItem`
  5. - constants // 项目中的常量定义,目前定义了`typescript`的公共定义、`reducers`的名称定义、状态码的定义
  6. - pages // 项目中的业务页面都在这个目录中
  7. - reducers // `redux`中的相关同步操作在这里进行
  8. - services // 可复用的服务可以放在这个目录中,目前只是封装了接口请求的公共服务,可以根据自己项目的需要进行其他服务的扩充
  9. - store // redux的初始文件
  10. - utils // 可以复用的工具方法可以放到这个目录当中,目前封装了格式化、歌词解析的相关方法
  11. - decorators // 抽象的装饰器,主要为了解决在切换页面之后仍然可以继续保持播放状态,因为目前`taro`不支持全局组件
  12. - app.scss // 全局样式
  13. - app.tsx // 全局入口文件
  14. - base.scss // 基础样式
  15. - config.ts // 项目的全局配置,目前只是配置了`baseUrl`是后端服务的基准请求地址

todo

  • 复用的评论列表
  • 搜索功能
  • react-hooks重构部分功能

最近更新

  • 加入搜索功能(有待进一步完善)
  • 加入了视频播放(有待进一步完善)

效果图预览

下面简要列出几张效果图

有待完善部分

还有一些功能点以及细节都还有待进一步完善,目前先把大致主要的功能进行了下实现,当然如果发现什么问题,欢迎能够提交issues,发现之后我会及时进行更正,欢迎 starfork,感谢大家支持

基于Taro与Typescript开发的网易云音乐小程序的更多相关文章

  1. 基于Taro与typescript开发的网易云音乐小程序(持续更新)

    基于Taro与网易云音乐api开发,技术栈主要是:typescript+taro+taro-ui+redux,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可 ...

  2. Android 开发之网易云音乐(或QQ音乐)的播放界面转盘和自定义SeekBar的实现

    这个东西我在eoeAndroid上首发的,但没有详细的实现说明:http://www.eoeandroid.com/thread-317901-1-1.html 在csdn上进行详细的说明吧.(同时上 ...

  3. iOS 开发仿网易云音乐歌词海报

    使用网易云音乐也是一个巧合,我之前一直使用QQ音乐听歌,前几天下 app 手机内存告急.于是就把QQ音乐给卸载掉了,正好晚上朋友圈里有一个朋友用网易云音乐分享了一首歌曲,于是我也就尝试下载了网易云音乐 ...

  4. 基于wepy和云开发的动漫资讯小程序----233次元

    233次元小程序 # 233次元小程序 项目描述- 基于微信小程序的动漫咨询小程序,采用`wepy`框架开发:- 后台数据采用小程序的云开发存储: 线上体验 部分截图                 ...

  5. 实现 60fps 的网易云音乐首页

    网易云音乐是一款很优秀的音乐软件,我也是它的忠实用户.最近在研究如何更好的开发TableView,接着我写了一个Model驱动的小框架 - MDTable.为了去验证框架的可用性,我选择了网易云音乐的 ...

  6. 《云阅》一个仿网易云音乐UI,使用Gank.Io及豆瓣Api开发的开源项目

    CloudReader 一款基于网易云音乐UI,使用GankIo及豆瓣api开发的符合Google Material Desgin阅读类的开源项目.项目采取的是Retrofit + RxJava + ...

  7. 基于vue2+vuex+vue-router+sass+webpack的网易云音乐

    [本博客为原创:http://www.cnblogs.com/HeavenBin/]  前言: 这段时间写的一个项目,供给大家互相学习,有什么疑问可以issues我. 源码地址:https://git ...

  8. 瓣呀,一个基于豆瓣api仿网易云音乐的开源项目

    整体采用material design 风格,本人是网易云音乐的粉丝,所以界面模仿了网页云音乐,另外,项目中尽量使用了5.0之后的新控件. 项目整体采用mvp+rxjava+retrofit 框架,使 ...

  9. Android开发——网易云音乐使用的开源组件集合

    前言 网易云音乐Android版从第一版使用到现在,全新的 Material Design 界面,更加清新.简洁.同样也是音乐播放器开发者,我们确实需要思考,相同的功能,会如何选择.感谢开源,让我们有 ...

随机推荐

  1. 使用log4net记录ABP日志

    demo地址:ABP.WindowsService 该文章是系列文章 基于.NetCore和ABP框架如何让Windows服务执行Quartz定时作业 的其中一篇. 参考:https://aspnet ...

  2. Linux下zookeeper下载与安装教程

    原文连接:(http://www.studyshare.cn/blog-front//blog/details/1169/0)一.下载 官网下载:点这里  百度网盘下载:点这里 官网下载图示: jav ...

  3. 林大妈的JavaScript基础知识(三):JavaScript编程(4)数组

    数组,是一段线性分配的,具有非常高性能的数据结构.简单地说,数组以连续的空间存储,通过整数地计算偏移量访问其中的元素,将读取修改的时间复杂度降低至O(1),我们称之为猝发式存取.是不是非常期待?没错, ...

  4. linux文本编辑vim命令

    1.Vim Vim  是一个功能强大的全屏幕文本编辑器,是 Linux/UNIX 上最常用的文本编辑器,它的作用是建立.编辑.显示文本文件. Vim 没有菜单,只有命令 2.Vim 工作模式 3.插入 ...

  5. Unity经典游戏教程之:是男人就下100层

    版权声明: 本文原创发布于博客园"优梦创客"的博客空间(网址:http://www.cnblogs.com/raymondking123/)以及微信公众号"优梦创客&qu ...

  6. 旁友数独会伐啦?python秒解数独了解下伐啦?

    前几天和隔壁邻居玩斗地主被发现了,牌被没收了,斗地主是斗不了了,但我还想和邻居玩耍.如果你还想斗斗地主,戳:趁老王不在,和隔壁邻居斗斗地主,比比大小 想破脑袋终于让我想到一个游戏,数独!什么叫数独?数 ...

  7. 用HTML5的canvas做一个时钟

    对于H5来说,canvas可以说是它最有特色的一个地方了,有了它之后我们可以随意的在网页上画各种各样的图形,做一些小游戏啊什么的.canvas这个标签的用法,在网上也有特别多的教程了,这里就不作介绍了 ...

  8. 富文本编辑器TinyMCE的使用(React Vue)

    富文本编辑器TinyMCE的使用(React Vue) 一,需求与介绍 1.1,需求 编辑新闻等富有个性化的文本 1.2,介绍 TinyMCE是一款易用.且功能强大的所见即所得的富文本编辑器. Tin ...

  9. AQS之CountDownLatch、Semaphore、CyclicBarrier

    CountDownLatch A synchronization aid that allows one or more threads to wait until a set of operatio ...

  10. ThreadPoolExecutor线程池的一个面试题

    问题:现有一个线程池,参数corePoolSize = 5,maximumPoolSize = 10,BlockingQueue阻塞队列长度为5,此时有4个任务同时进来,问:线程池会创建几条线程? 如 ...