基于 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 目录，因为开发主要是在这个目录下进行的

todo

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

最近更新

加入搜索功能（有待进一步完善）
加入了视频播放（有待进一步完善）



效果图预览

下面简要列出几张效果图




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

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