在线文档

云音乐 (yuque.com)

简介

在数字化时代，音乐不再仅仅是一种娱乐方式，它已经成为我们生活中不可或缺的一部分。无论是放松身心、激发创造力，还是与朋友分享喜悦，音乐都有着不可比拟的力量。现在，一个全新的微信小程序项目——“云音乐”为您带来了发现音乐的全新方式。

主要功能特点

1. 音乐搜索和播放： 通过云音乐，您可以轻松搜索和播放数百万首歌曲，包括最新的热门单曲和经典老歌。
2. 个人化推荐： 云音乐会根据您的听歌习惯和喜好向您推荐新音乐，让您不断发现新的音乐宝藏。
3. 歌词同步显示： 想要跟着歌词一起唱？云音乐会将歌词实时同步显示，让您更深入地感受音乐的魅力。
4. 创建播放列表： 您可以轻松创建和管理自己的播放列表，根据心情或场合随时切换不同的音乐列表。
5. 开源项目： 云音乐是一个开源项目，您可以自由查看和修改其源代码，根据自己的需求进行定制。
6. **使用开源API接口：**云音乐使用了开源的api接口，可以运行在node.js等服务端中，你可以轻松的部署自己的接口服务器。
7. **视频播放器：**你可以观看歌曲MV等视频。
8. 歌单中心，视频中心，电台中心，排行榜，搜索中心，用户收藏，用户观看记录...

主要页面介绍：

详情页面介绍：

播放器功能介绍：

技术栈

技术名	功能	官网
原生微信小程序	开发微信小程序	微信开放文档
TDesign	UI组件库	TDesign
Sass	css预处理器	Sass: Syntactically Awesome Style Sheets
mobx-miniprogram	全局状态管理	mobx-miniprogram

视频预览

https://www.bilibili.com/video/BV1rK4y1w7m6

图片预览

登录

首页

搜索中心

每日推荐

歌单中心

排行榜

电台中心

视频中心

个人中心

最近播放

我的收藏

编辑资料

详情信息展示

播放列表页

歌单/电台 展示页

评论区

播放器页面

音乐播放器

视频播放器

---

二次开发

克隆运行

克隆到本地

例如

git clone https://gitee.com/tmaofu/mini-program---cloud-music.git

安装依赖

进入项目根目录，执行npm install 安装项目依赖

cd ./mini-program---cloud-music
npm install 

构建依赖

使用微信开发者工具导入项目

开始构建npm包，构建成功后关闭微信开发者工具。

部署API接口服务

具体可以参考：

网易云音乐 NodeJS 版 API

安装

 git clone git@github.com:Binaryify/NeteaseCloudMusicApi.git
 cd NeteaseCloudMusicApi
 npm install

运行

node app.js

服务器启动默认端口为 3000, 若不想使用 3000 端口 , 可使用以下命令 : Mac/Linux

$ PORT=4000 node app.js

windows 下使用 git-bash 或者 cmder 等终端执行以下命令 :

$ set PORT=4000 && node app.js

配置API接口地址

再次用微信开发者工具打开项目，

编辑config\config.js文件中的baseUrl为你的API接口服务的地址。

export default {
  baseUrl: 'http://127.0.0.1:3000',
  cookieKey: 'cookie', //cookie保存本地的key名称
  blogUrl: 'https://www.yuque.com/maofu-rzqcp',
  searchHistoryKey: 'searchHistory'
}

不校验合法域名

编译运行

当配置好之后就可以编译运行了

项目目录结构说明

顶层目录

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

我的分享-Apifox

这是我这个项目中用到的一些api接口，接口返回的数据均有示例。
使用须知 - 小程序-云音乐

相关问题

如何修改拦截器

打开 utils/request.js,修改 Requester 类中的方法：

方法名	功能
requestIntercept	请求拦截器
responseIntercept	响应拦截器
errIntercept	错误拦截器