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有一定帮助,喜欢的朋友可以去项目官网了解起来。
taro 重新加载小程序_taro-music一款开源网易云音乐小程序相关推荐
- android 加载动画效果_这效果炸了,网易云音乐“宇宙尘埃”特效
本文作者 作者:Mlx 链接: https://juejin.im/post/6871049441546567688 本文由作者授权发布. 1前言 前段时间,女朋友用网易云音乐的时候看到一个宇宙尘埃特 ...
- 简单的仿网易云音乐小程序(一)
简单的仿网易云音乐小程序(一) 前言 思维图 注意事项 虚拟机调试 真机调试 主页面 搜索框 歌单列表 歌单模版 wxs filter 页面逻辑 等待搜索页面 搜索框 clearValue start ...
- 网易云音乐小程序,带后台(SpringBoot)
目录 1.简介 2.技术栈 3.环境 4.项目后台配置 5.项目展示 6.下载地址 1.简介 此系统是仿网易云音乐 网易云音乐是一款专注于发现与分享的音乐产品,依托专业音乐人.DJ.好友推荐及社交功能 ...
- 简单的仿网易云音乐小程序(总结)
简单的仿网易云音乐小程序(总结) 这个小程序学到了以下知识点 配置网络请求 进行网络请求 进行音乐播放 进行模版使用 各种页面触发事件 输入框的使用 简单的自定义tab页面切换 导航的数据传输
- 微信小程序之网易云音乐小案例
目录 一.编写对网易云音乐api发起请求的代码 二.编写视频项(组件) 三.编写mv列表:包含(轮播图+视频列表[每个视频项引用组件来呈现]) 四.编写视频详情页 成品图: 准备工作: --在page ...
- 网易云音乐小程序案例分享 附完整代码
todo: 添加音乐到收藏(最近)列表 歌词滚动 从一个 hello world 开始 微信开发者工具生成 目录如下: . |-- app.js |-- app.json |-- app.wxss | ...
- 解锁网易云音乐小工具_什么?网易云音乐又变灰了
目前音乐市场主要有三大巨头:酷狗音乐,QQ音乐,网易云音乐.QQ音乐与网易云音乐进入市场都较晚,但是网易云音乐凭借灵活的音乐社交玩法积累了非常多的用户,而QQ音乐凭借着有钱优势,购买了很多音乐版权,网 ...
- 这次引起程序员恐慌的竟然是网易云音乐
2019独角兽企业重金招聘Python工程师标准>>> 听说程序员和音乐更配哟,分享网易云音乐年度报告怎么能少了IT圈的主力程序员呢!因为程序员除了我们经常说的格子衫,还有的一个标签 ...
- 矿小助 全局主题 | 一个插件实现网易云音乐主题效果 | Flutter
矿小助拥有三种主题,实现起来非常复杂,总结起来就更不用说了,头皮发麻QAQ. 因此,花了半天时间将其拆分出来,做成插件,开源给大家使用.具体的细节大家自己研究吧(溜). 第一次做插件,难免考虑不周,还 ...
最新文章
- 2w字大白话讲解Spring Cloud,必须收藏
- TS流的解码过程-ES-PES-DTS-PTS-PCR
- scala中何时使用下划线_在Scala中使用下划线
- Java开发中 Double 和 float 不能直接运算
- 在Oracle里,表的别名不能用as,列的别名可以用as
- springCloud五大组件--Gateway
- 软件工程—个人作业(8)
- Linux系统如何连接和上传文件到服务器上
- matlab循环输出图像,运用matlab实现循环语句中的多幅图像显示
- Chaos Control for Mac(GTD计划任务管理工具)
- 火狐安装网页视频下载插件(Video DownloadHelper)
- GROW GM65 条码二维码扫描识别模块 兼容大部分条码和二维码
- 统计软件 | Jamovi简介
- Python网页编程(CGI)
- UI设计师有哪些就业方向选择?
- 重点人口动态管控轨迹分析系统开发,可视化大数据平台建设
- Proxy 与 Object.defineProperty 优劣对比
- WIN10禁用(AMD显卡驱动)更新windows找不到gpedit.msc请确定文件名
- 制作一份简易DVD系统
- 【连载】《linux入门很简单》电子版——作者:刘金鹏(第一章初来乍到——启动)...
热门文章
- healpy的安装(包括healpix)
- 代码的印象派:写点好代码吧
- 【shiro】使用shiro搭建的项目,页面引用js,报错:Uncaught SyntaxError: Unexpected token ...
- 转	vi 编辑器,gcc 编译器的使用
- 为ListView组件加上快速滑块以及修改快速滑块图像
- Windows server下部署php环境
- vc++怎么利用ado连接数据库(mysql)
- CSS a:hover伪类在IE6下的问题
- 用C#2.0实现网络蜘蛛(WebSpider)
- Spark源码阅读03-Spark存储原理之序列化和压缩