基于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] 统一的播放组件,方便进行切换页面后可以随时进入到播放页面

目录结构简要介绍

这里主要介绍下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,发现之后我会及时进行更正,欢迎 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. python课堂整理10---局部变量与全局变量

    一.局部变量与全局变量 1. 没有缩进,顶头写的变量为全局变量 2. 在子程序里定义的变量为局部变量 3. 只有函数能把变量私有化 name = 'lhf' #全局变量 def change_name ...

  2. 关于JLINK调试时出现的 erasing range....的问题结果方法

    声明:本人当然不是提倡盗版. 昨天在使用JLINK的时候遇到了这个问题,但是非常蹊跷,首先可以下载,但不能进入调试,到后来完成不能下载了. 这个问题的原因就是你得Keil检测到你锁使用的JLINK不是 ...

  3. Spring源码解析——循环依赖的解决方案

    一.前言 承接<Spring源码解析--创建bean>.<Spring源码解析--创建bean的实例>,我们今天接着聊聊,循环依赖的解决方案,即创建bean的ObjectFac ...

  4. php 获取未来七天的日期和星期

    php获取未来七天的日期和星期代码     for($i=4;$i<8;$i++){       $dateArray[$i]=date('Y-m-d',strtotime(date('Y-m- ...

  5. Linux基础文件打包

    一.打包与解压 (一).打包压缩 [root@linux ~]# tar -czf etc1.tar.gz /etc //-z 调用gzip [root@linux ~]# tar -cjf etc2 ...

  6. java基本数据类型和包装类之间的区别

    1.声明方式不同,基本类型不适用new关键字,而包装类型需要使用new关键字来在堆中分配存储空间: 2.存储方式及位置不同,基本类型是直接将变量值存储在堆栈中,而包装类型是将对象放在堆中,然后通过引用 ...

  7. 【React踩坑记四】React项目中引入并使用js-xlsx上传插件(结合antdesign的上传组件)

    最近有一个前端上传并解析excel/csv表格数据的需求. 于是在github上找到一个14K star的前端解析插件 github传送门 官方也有,奈何实在太过于浅薄.于是做了以下整理,避免道友们少 ...

  8. 【Java笔记】【Java核心技术卷1】chapter3 D3数据类型

    package chapter3; public class D3数据类型 { public static void main(String[] arg) { //Java 整型(字节数不会随硬件变化 ...

  9. Kafka基本知识入门(一)

    1. 基础知识 有关RabbitMQ,RocketMQ,Kafka的区别这个网上很多,了解一下区别性能,分清什么场景使用.分布式环境下的消息中间件Kafka做的比较不错,在分布式环境下使用频繁,我也不 ...

  10. node 删除和复制文件或文件夹

    [toc] 创建时间:2019-08-12 注意:在win10,v10.16.1 环境运行无问题 首先引入相关包(会在使用处具体说明): const fs = require('fs') const ...