基于Taro与typescript开发的网易云音乐小程序

张利勇发布于2019-08-26 10:26 / 1549人阅读

摘要：基于与网易云音乐开发，技术栈主要是目前主要是着重小程序端的展示，主要也是借此项目强化下上述几个技术栈的使用，通过这个项目也可以帮助你快速使用开发一个属于你自己的小程序地址，感兴趣的话可以关注下，功能会进行持续完善快速开始首先需要在目录下

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

目录结构简要介绍

这里主要介绍下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，感谢大家支持

GPU云服务器云服务器基于hadoop的海量数据存储平台设计与开发云开发的小程序还需要服务器吗开发小程序的语言小程序的开发语言

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106169.html

Taro 优秀学习资源汇总

摘要：多端统一开发框架优秀学习资源汇总官方资源项目仓库官方文档项目仓库官方文档微信小程序官方文档百度智能小程序官方文档支付宝小程序官方文档字节跳动小程序官方文档文章教程不敢阅读包源码带你揭秘背后的哲学从到构建适配不同端微信小程序等的应用小程序最 Awesome Taro 多端统一开发框架 Taro 优秀学习资源汇总 showImg(https://segmentfault.com/img/r...

toddmark 2019-08-23 18:02 评论0 收藏0
为微信小程序开发的网易云音乐api库

摘要：之前我们已经开发过一款小程序适用的音乐库，这次开发网易云音乐库的原因是音乐库在小程序中环境下无法使用小程序提供的背景音频播放器播放的问题网易云的加密算法真的比其他几家复杂太多了。。。之前我们已经开发过一款小程序适用的qq音乐api库https://github.com/FisherWY/Q...，这次开发网易云音乐api库的原因是qq音乐api库在小程序中iOS环境下无法使用小程序提...

Codeing_ls 2019-08-23 17:16 评论0 收藏0
平时积累的前端资源，持续更新中。。。

本文收集学习过程中使用到的资源。持续更新中…… 项目地址 https://github.com/abc-club/f... 目录 vue react react-native Weex typescript Taro nodejs 常用库 css js es6 移动端微信公众号小程序 webpack GraphQL 性能与监控高质文章趋势动效数据结构与算法 js core 代码规范...

acrazing 2019-08-26 10:40 评论0 收藏0
React的移动端和PC端生态圈的使用汇总

摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...

kun_jian 2019-08-02 15:28 评论0 收藏0
React的移动端和PC端生态圈的使用汇总

摘要：调用通过注册表调用到实例，透过的，调用到中的，最后通过，调用，根据参数相应模块执行。京东的，多端解决方案是一套遵循语法规范的多端开发解决方案。 showImg(https://segmentfault.com/img/bVbuMkw?w=1304&h=808); 对于一项技术，我们不能停留在五分钟状态，特别喜欢一句话，用什么方式绘制UI界面一点不重要，重要的是底层的思维，解决问题和优化...

J4ck_Chan 2019-08-23 18:32 评论0 收藏0