# 微信小程序音乐播放器

**Repository Path**: vitalzf/wechat-applet-music-player

## Basic Information

- **Project Name**: 微信小程序音乐播放器
- **Description**: No description available
- **Primary Language**: 微信
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-25
- **Last Updated**: 2022-02-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 微信小程序音乐播放器
## 主要页面
`首页`、`登录页`、`搜索页`、`个人中心页`、`视频展示页`、`视频播放页`、`音乐播放页`
## 首页
- 组件化封装，歌单组件、歌单列表组件
## 视频页
- 上拉刷新，触底加载更多，虚拟长列表处理优化性能
## 搜索页
- 关键词模糊搜索，请求防抖处理，对精确匹配到的字高亮展示
## 音乐播放页：
- 歌词解析实时匹配展示当前时间段的歌词
- 进度条点击、拖动改变歌曲播放位置
- 播放模式的切换（顺序播放、单曲循环、随机播放）
- 上一首、下一首（根据播放模式进行逻辑控制），歌曲列表的控制逻辑
- 自定义导航栏
## 个人中心页
## 全局优化
- 全局共享数据仓库函数的封装
   微信小程序中并没有类似vuex,redux这样的状态管理工具，为了解决这个问题，本项目利用发布订阅的思想，封装了一个[状态管理工具函数](https://gitee.com/vitalzf/wechat-applet-music-player/tree/master/store/vital-store)，可以在页面任意位置进行数据监听，当数据变化后会执行回调通知变化
- 数据请求的promise封装

## 项目展示
<img src="./assets/picture/home1.png" width = "200" height = "360" alt="图片名称" align=center /><img src="./assets/picture/home2.png" width = "200" height = "360" alt="图片名称" align=center /><img src="./assets/picture/video-page.png" width = "200" height = "360" alt="图片名称" align=center /><img src="./assets/picture/video-detail.png" width = "200" height = "360" alt="图片名称" align=center /><img src="./assets/picture/search1.png" width = "200" height = "360" alt="图片名称" align=center /><img src="./assets/picture/search2.png" width = "200" height = "360" alt="图片名称" align=center /><img src="./assets/picture/search3.png" width = "200" height = "360" alt="图片名称" align=center /><img src="./assets/picture/list-item.png" width = "200" height = "360" alt="图片名称" align=center /><img src="./assets/picture/player-music.png" width = "200" height = "360" alt="图片名称" align=center /><img src="./assets/picture/player-lyric.png" width = "200" height = "360" alt="图片名称" align=center />