文档章节

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

lsqy
 lsqy
发布于 08/01 22:15
字数 1128
阅读 32
收藏 1

基于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] 喜欢/取消喜欢某首歌曲
  • [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重构部分功能

最近更新

  • 加入搜索功能(有待进一步完善)
  • 加入了视频搜索以及播放(有待进一步完善)
  • 加入了mv搜索以及播放(有待进一步完善)
  • 加入了视频与mv中的评论列表(2019-09-07)

效果图预览

下面简要列出几张效果图

有待完善部分

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

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

© 著作权归作者所有

lsqy
粉丝 0
博文 4
码字总数 5481
作品 1
朝阳
前端工程师
私信 提问
Taro+dva+Typescript 搭建微信小程序架构

原文链接 个人博客-欢迎访问 效果预览图: 微信小程序的开发目前是很热的一个领域,有很多的开发模式,找到一种属于自己的方法才会使得开发顺心顺利。 此架构是使用 Taro + dva + typescrip...

Drl龍
07/29
0
0
多端统一开发框架 Taro 1.0 正式发布

在 我们对外开源了 多端统一开发框架 —— Taro。 Taro 是一个多端统一开发框架,它支持使用 React 的开发方式来编写可以同时在微信小程序、Web 、React Native 等多个平台上运行的应用,帮助...

yuche
2018/09/18
10.1K
12
7个拒绝使用TypeScript的坏借口

译者按: TypeScript 学习成本不高,项目切换成本不低,不过还是值得试一试的! 原文:7 bad excuses for not using TypeScript 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外...

Fundebug
2018/12/26
218
6
TypeScript 1.0 正式版发布!

TypeScript 1.0 现已作为 Visual Studio 2013 and Visual Studio Web Express 2013 Spring Update 的一部分;同时也提供 npm package 和 source。TypeScript 1.0 版本现已提供在 power tool......

oschina
2014/04/03
3.2K
9
基于 Taro 与 TypeScript 的网易云音乐小程序 - taro-music

基于与网易云音乐api开发,技术栈主要是:,目前主要是着重小程序端的展示,主要也是借此项目强化下上述几个技术栈的使用,通过这个项目也可以帮助你快速使用开发一个属于你自己的小程序~ 功...

lsqy
08/02
710
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊nacos的LocalConfigInfoProcessor

序 本文主要研究一下nacos的LocalConfigInfoProcessor LocalConfigInfoProcessor nacos-1.1.3/client/src/main/java/com/alibaba/nacos/client/config/impl/LocalConfigInfoProcessor.java p......

go4it
昨天
5
0
前端技术之:webpack热模块替换(HMR)

第一步:安装HMR中间件: npm install --save-dev webpack-hot-middleware 第二步:webpack配置中引入webpack对象 const webpack = require('webpack’); 第三步:增加devServer配置项: ho......

popgis
昨天
5
0
死磕 java线程系列之线程池深入解析——体系结构

(手机横屏看源码更方便) 注:java源码分析部分如无特殊说明均基于 java8 版本。 简介 Java的线程池是块硬骨头,对线程池的源码做深入研究不仅能提高对Java整个并发编程的理解,也能提高自己...

彤哥读源码
昨天
7
0
虚函数表 图解

虚函数表 图解 p504

天王盖地虎626
昨天
6
0
java反射

学习目标  什么是反射  反射运行原理  了解反射机制的相关类  获取 class 对象的 3 种方式  通过反射获取构造方法并使用  通过反射获取成员变量并调用  通过反射获取成员方法并...

流川偑
昨天
5
2

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部