# 小程序-云音乐
**Repository Path**: tmaofu/mini-program---cloud-music
## Basic Information
- **Project Name**: 小程序-云音乐
- **Description**: 仿造网易云音乐APP，利用开源API接口实现微信小程序端的音乐应用。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 11
- **Forks**: 5
- **Created**: 2023-06-01
- **Last Updated**: 2025-09-23
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 在线文档
[云音乐 (yuque.com)](https://www.yuque.com/maofu-rzqcp/snisqw/sg0u1zd77cn86srz)
# 简介
在数字化时代，音乐不再仅仅是一种娱乐方式，它已经成为我们生活中不可或缺的一部分。无论是放松身心、激发创造力，还是与朋友分享喜悦，音乐都有着不可比拟的力量。现在，一个全新的微信小程序项目——“云音乐”为您带来了发现音乐的全新方式。
## 主要功能特点
1. **音乐搜索和播放：** 通过云音乐，您可以轻松搜索和播放数百万首歌曲，包括最新的热门单曲和经典老歌。
2. **个人化推荐：** 云音乐会根据您的听歌习惯和喜好向您推荐新音乐，让您不断发现新的音乐宝藏。
3. **歌词同步显示：** 想要跟着歌词一起唱？云音乐会将歌词实时同步显示，让您更深入地感受音乐的魅力。
4. **创建播放列表：** 您可以轻松创建和管理自己的播放列表，根据心情或场合随时切换不同的音乐列表。
5. **开源项目：** 云音乐是一个开源项目，您可以自由查看和修改其源代码，根据自己的需求进行定制。
6. **使用开源API接口：**云音乐使用了开源的api接口，可以运行在node.js等服务端中，你可以轻松的部署自己的接口服务器。
7. **视频播放器：**你可以观看歌曲MV等视频。
8. 歌单中心，视频中心，电台中心，排行榜，搜索中心，用户收藏，用户观看记录...
### 主要页面介绍：
### 详情页面介绍：
### 播放器功能介绍：
## 技术栈
| **技术名** | **功能** | **官网** |
| --- | --- | --- |
| 原生微信小程序 | 开发微信小程序 | [微信开放文档](https://developers.weixin.qq.com/miniprogram/dev/framework/) |
| TDesign | UI组件库 | [TDesign](https://tdesign.tencent.com/miniprogram/getting-started) |
| Sass | css预处理器 | [Sass: Syntactically Awesome Style Sheets](https://sass-lang.com/) |
| mobx-miniprogram | 全局状态管理 | [mobx-miniprogram](https://www.npmjs.com/package/mobx-miniprogram) |
## 视频预览
https://www.bilibili.com/video/BV1rK4y1w7m6
## 图片预览
### 登录
### 首页
#### 搜索中心
#### 每日推荐
#### 歌单中心
#### 排行榜
#### 电台中心
### 视频中心
### 个人中心
#### 最近播放
#### 我的收藏
#### 编辑资料
### 详情信息展示
#### 播放列表页
#### 歌单/电台 展示页
#### 评论区
### 播放器页面
#### 音乐播放器
#### 视频播放器
----
# 二次开发
## 克隆运行
### 克隆到本地
例如
```nginx
git clone https://gitee.com/tmaofu/mini-program---cloud-music.git
```
### 安装依赖
进入项目根目录，执行`npm install `安装项目依赖
```nginx
cd ./mini-program---cloud-music
npm install
```
### 构建依赖
使用微信开发者工具导入项目
开始构建npm包，构建成功后关闭微信开发者工具。
### 部署API接口服务
具体可以参考：
[网易云音乐 NodeJS 版 API](https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=安装)
安装
```nginx
git clone git@github.com:Binaryify/NeteaseCloudMusicApi.git
cd NeteaseCloudMusicApi
npm install
```
运行
```shell
node app.js
```
服务器启动默认端口为 3000, 若不想使用 3000 端口 , 可使用以下命令 : Mac/Linux
```shell
$ PORT=4000 node app.js
```
windows 下使用 git-bash 或者 cmder 等终端执行以下命令 :
```shell
$ set PORT=4000 && node app.js
```
### 配置API接口地址
再次用微信开发者工具打开项目，
编辑`config\config.js`文件中的`baseUrl`为**你的API接口服务的地址**。
```javascript
export default {
baseUrl: 'http://127.0.0.1:3000',
cookieKey: 'cookie', //cookie保存本地的key名称
blogUrl: 'https://www.yuque.com/maofu-rzqcp',
searchHistoryKey: 'searchHistory'
}
```
### 不校验合法域名
### 编译运行
当配置好之后就可以编译运行了
## 项目目录结构说明
### 顶层目录
![J0M~$F736@PKVLP27[]TG{H.png](https://cdn.nlark.com/yuque/0/2023/png/34576819/1694003692883-df64b58c-34e5-4bd7-bdbd-387816b28870.png#averageHue=%23faf9f7&clientId=u0a64b032-cffd-4&from=paste&height=699&id=favlr&originHeight=1048&originWidth=430&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=71135&status=done&style=none&taskId=u4ef6069d-5976-490c-9271-64a54703792&title=&width=286.6666666666667)
api: 管理主包中用到的api接口
assets: 存放主包中的静态资源文件
behaviors: 存放公用的behaviors
components: 存放主包中的组件
config: 存放配置文件
custom-tab-bar: 自定义tab-bar组件
data: 存放一些会用到的数据
miniprogram_npm: npm包
node_modules: npm包
packages: 存放分包
pages: 存放主包中的页面
store: 状态管理仓库
template: 存放主包中的模板
utils: 存放工具性质的文件
### 目录文件详解
#### assets: 存放主包中的静态资源文件
flx-TDesign.scss: 修改TDesign样式
iconfont.scss: 阿里巴巴图标字体样式
index.scss: 存放一些共用样式类
variable.scss: 定义了一系列css样式变量
#### behaviors: 存放主包中公用的behaviors
injectAppStore.js: 可以向组件或者页面注入应用的状态，例如tab-bar当前的索引值
injectCheckLogin.js: 注入检查登录相关的函数
injectMusicPlayerStore.js：注入音乐播放器相关的状态
injectUserStore.js：注入用户相关的状态
#### components: 存放主包中的组件
common: 存放公共组件
home-center: 存放首页中会用到的组件
personal-center：存放个人中心页会用到的组件
video-center: 存放视频中心页会用到的组件
##### common: 存放公共组件
```
├─components
│ ├─common
│ │ ├─comment-area
│ │ ├─comment-item
│ │ ├─info-item-card
│ │ ├─music-player
│ │ ├─my-loading
│ │ ├─play-controll
│ │ ├─program-display-list
│ │ ├─song-display-list
│ │ ├─song-list
│ │ └─touch-panel
```
###### comment-area
###### comment-item
###### info-item-card
###### music-player
###### my-loading
###### play-controll
###### program-display-list
###### song-display-list
###### song-list
###### touch-panel
一个触摸面板组件，可以触发触摸，滑动事件，判断滑动方向，滑动距离等。
在音乐播放器组件（music-player）中，个人中心-个人背景卡片中，有使用。
###### 注意：以上组件均在app.json中注册了，可以全局使用
##### home-center: 存放首页中会用到的组件
```
├─components
│ ├─home-center
│ │ ├─home-item-card
│ │ └─rank-list-card
```
###### home-item-card
###### rank-list-card
##### personal-center：存放个人中心页会用到的组件
```
├─components
│ ├─personal-center
│ │ ├─collect-songList
│ │ └─create-songList
```
###### collect-songList
###### create-songList
##### video-center: 存放视频中心页会用到的组件
```
├─components
│ └─video-center
│ ├─commend-video
│ ├─commend-video-item
│ └─mv-video
```
###### commend-video
###### commend-video-item
###### mv-video
#### config: 存放配置文件
```
export default {
baseUrl: 'http://127.0.0.1:3000',
cookieKey: 'cookie', //cookie保存本地的key名称
blogUrl: 'www.maofu123.top',
searchHistoryKey: 'searchHistory'
}
```
#### custom-tab-bar: 自定义tab-bar组件
#### data: 存放一些会用到的数据
存放了省份，城市信息
#### miniprogram_npm: npm包
#### node_modules: npm包
#### packages: 存放分包
packges-common: 公共分包
packges-home-center: 首页分包，存放了在首页中会进入的页面，要使用的组件，等等资源。
packges-personal-center: 个人中心分包
packges-sys: 系统分包，存放了登录相关的页面。
packges-video-center: 视频中心分包
##### packges-common: 公共分包
```
├─packages
│ ├─package-common
│ │ └─pages
│ │ └─comment-display
```
###### pages
| **页面/组件名称** | **功能** |
| --- | --- |
| comment-display | 评论展示页面 |
| | |
##### packges-home-center: 首页分包，存放了在首页中会进入的页面，要使用的组件，等等资源。
```
├─packages
│ ├─package-home-center
│ │ ├─components
│ │ │ ├─broadcaster-item-display
│ │ │ ├─playlist-item-display
│ │ │ ├─search-list
│ │ │ ├─search-result-dj
│ │ │ ├─search-result-playlist
│ │ │ ├─search-result-song
│ │ │ ├─search-result-tabs
│ │ │ ├─search-result-video
│ │ │ └─search-result-voice
│ │ └─pages
│ │ ├─broadcaster-center
│ │ ├─broadcaster-display
│ │ ├─broadcaster-tags
│ │ ├─playlist-center
│ │ ├─playlist-display
│ │ ├─playlist-tags
│ │ ├─recommended-daily
│ │ ├─recommended-playlist
│ │ ├─search-center
│ │ └─toplist-center
```
###### components
| **组件名称** | **功能** |
| --- | --- |
| broadcaster-item-display |  |
| playlist-item-display |  |
| search-list |  |
| search-result-dj | 搜索结果展示列表-电台 |
| search-result-playlist | 搜索结果展示列表-歌单 |
| search-result-song | 搜索结果展示列表-歌曲 |
| search-result-tabs | 搜索结果展示的tabs |
| search-result-video | 搜索结果展示列表-视频 |
| search-result-voice | 搜索结果展示列表-声音 |
###### pages
| **页面名称** | **功能** |
| --- | --- |
| broadcaster-center |  |
| broadcaster-display |  |
| broadcaster-tags |  |
| playlist-center |  |
| playlist-display |  |
| playlist-tags |  |
| recommended-daily |  |
| recommended-playlist |  |
| search-center |  |
| toplist-center |  |
##### packges-personal-center: 个人中心分包
```
├─packages
│ ├─package-personal-center
│ │ ├─components
│ │ │ ├─ei-form-item
│ │ │ ├─mc-album
│ │ │ ├─mc-dj
│ │ │ ├─mc-video
│ │ │ ├─rp-album
│ │ │ ├─rp-dj
│ │ │ ├─rp-song
│ │ │ ├─rp-songList
│ │ │ ├─rp-video
│ │ │ └─rp-voice
│ │ ├─pages
│ │ │ ├─edit-info
│ │ │ ├─my-collection
│ │ │ ├─mylike-video
│ │ │ └─recent-play
│ │ └─template
│ │ ├─mc-item-card
│ │ └─rp-item-card
```
###### components
| **组件名称** | **功能** |
| --- | --- |
| ei-form-item |  |
| mc-album |  |
| mc-dj |  |
| mc-video |  |
| rp-album | 最近播放-专辑 |
| rp-dj | 最近播放-电台 |
| rp-song | 最近播放-歌曲 |
| rp-songList | 最近播放-歌单 |
| rp-video | 最近播放-视频 |
| rp-voice | 最近播放-声音 |
###### pages
| **页面名称** | **功能** |
| --- | --- |
| edit-info |  |
| my-collection |  |
| mylike-video |  |
| recent-play |  |
###### template
| **模板名称** | **功能** |
| :----------: | :----------------------------------------------------------: |
| mc-item-card | 我的收藏-信息展示模板
 |
| rp-item-card | 最近播放-信息展示模板
 |
##### packges-sys: 系统分包，存放了登录相关的页面。
```
├─packages
│ ├─package-sys
│ │ ├─assets
│ │ │ └─img
│ │ └─pages
│ │ └─login
```
###### pages
| **页面名称** | **功能** |
| --- | --- |
| login |  |
##### packges-video-center: 视频中心分包
```
├─packages
│ └─package-video-center
│ ├─components
│ │ └─video-play-item
│ └─pages
│ └─video-player
```
###### components
| **组件名称** | **功能** |
| --- | --- |
| video-play-item | 视频播放器-每一项
 |
###### pages
| **页面名称** | **功能** |
| --- | --- |
| video-player | 视频播放器页面-可滑动加载更多 |
#### pages: 存放主包中的页面
```
├─pages
│ ├─TB-home
│ ├─TB-personal-center
│ └─TB-video
```
| **页面名称** | **功能** |
| --- | --- |
| TB-home | 首页 |
| TB-personal-center | 个人中心页 |
| TB-video | 视频中心页 |
#### store: 状态管理仓库
```
├─store
│ ├─app
│ ├─musicPlayer
│ └─user
```
| **文件名** | **功能** |
| --- | --- |
| app | 关于app的全局状态仓库 |
| musicPlayer | 关于音乐播放器的全局状态仓库 |
| user | 关于用户信息的全局状态仓库 |
#### template: 存放主包中的模板
```
├─template
│ ├─common
│ │ └─info-display-card
│ ├─home-center
│ │ └─rank-list-item
│ └─personal-center
│ └─more-operations-item
```
##### common：存放公用的模板
| **模板名** | **功能** |
| --- | --- |
| info-display-card |  |
##### home-center：存放首页中会用到的模板
| **模板名** | **功能** |
| --- | --- |
| rank-list-item |  |
##### personal-center：存放个人中心页会用到的模板
| **模板名** | **功能** |
| --- | --- |
| more-operations-item |  |
#### utils: 存放主包中工具性质的文件
```
└─utils
│ getArea.js
│ localStorage.js
│ request.js
│ util.js
│
├─filter-js
│ filter.js
│
└─filter-wxs
filter.wxs
```
| **文件名** | **功能** |
| --- | --- |
| getArea | 获取省份，城市名 |
| localStorage | 本地存储 |
| request | 封装wx.request |
| util | 存放一些工具性质的函数 |
| filter.js | 过滤器 |
| filter.wxs | 过滤器 |
## API 接口文档
### 接口官网
[网易云音乐 NodeJS 版 API](https://binaryify.github.io/NeteaseCloudMusicApi/#/)
### 我的分享-Apifox
这是我这个项目中用到的一些api接口，接口返回的数据均有示例。
[使用须知 - 小程序-云音乐](https://apifox.com/apidoc/shared-d1527336-205c-49ac-91a4-973c853109c6)
## 相关问题
### 如何修改拦截器
打开` utils/request.js`,修改 `Requester` 类中的方法：
| **方法名** | **功能** |
| --- | --- |
| requestIntercept | 请求拦截器 |
| responseIntercept | 响应拦截器 |
| errIntercept | 错误拦截器 |