taro 重新加载小程序_taro-music一款开源网易云音乐小程序

简介

taro-music 是基于taro + taro-ui + redux + react-hooks + typescript 开发的网易云音乐小程序,目前正在使用react-hooks重构中。同时，它也是一个很好的学习项目，基于Taro与网易云音乐 api 开发，技术栈主要是：typescript+taro+taro-ui+redux+react-hooks,目前主要是着重小程序端的展示，主要也是借此项目强化下上述几个技术栈的使用，打造一个最佳实践项目，通过这个项目也可以帮助你快速使用Taro开发一个属于你自己的小程序。

github 地址：

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

github star: 560+， MIT 协议

主要技术栈

taro、taro-ui、redux、react-hooks、typescript

功能列表

用户登陆退出登陆我的关注列表我的粉丝列表最近播放列表推荐歌单推荐电台推荐电台我创建的歌单列表我收藏的歌单列表共用的歌单详情列表歌曲播放页面歌词滚动歌曲切换播放模式(随机播放/单曲循环/顺序播放)切换上一首/下一首喜欢/取消喜欢某首歌曲评论列表视频播放热搜列表搜索(包含单曲/歌单/视频/歌手/专辑/电台/用户)统一的播放组件，方便进行切换页面后可以随时进入到播放页面搜索功能 视频播放 mv 播放 视频与 mv 中的评论列表

项目截图

本地开发

# 启动后端接口服务git clone https://github.com/Binaryify/NeteaseCloudMusicApi.gitcd NeteaseCloudMusicApinpm inpm run start# 接下来启动前端项目git clone https://github.com/lsqy/taro-music.gitcd taro-musicnpm inpm run dev:weapp

目录结构简要介绍

这里主要介绍下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`是后端服务的基准请求地址

PS

该项目对熟悉taro、taro-ui、redux、react-hooks、typescript有一定帮助，喜欢的朋友可以去项目官网了解起来。