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

基于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

复制代码

功能列表

• 用户登录
• 退出登录
• 个人关注列表
• 个人粉丝列表
• 个人动态列表
• 最近播放列表
• 个人电台
• 个人收藏
• 推荐歌单
• 推荐电台
• 推荐电台
• 我建立的歌单列表
• 我收藏的歌单列表
• 共用的歌单详情列表
• 歌曲播放页面
• 歌词滚动
• 歌曲切换播放模式（随机播放/单曲循环/顺序播放）
• 切换上一首/下一首
• 喜欢/取消喜欢某首歌曲
• 评论列表
• 统一的播放组件，方便进行切换页面后能够随时进入到播放页面

目录结构简要介绍

这里主要介绍下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，感谢你们支持🙏。

文章首发自我的博客基于Taro与typescript开发的网易云音乐小程序