【开源项目】”云音乐“微信小程序

Maofu
332 阅读11分钟

在线文档

云音乐 (yuque.com)

简介

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

主要功能特点

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

技术栈

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

图片预览

登录

Screenshot_2023-09-06-16-02-40-878_com.tencent.mm.jpg
Screenshot_2023-09-06-16-03-25-162_com.tencent.mm.jpg

首页

Screenshot_2023-09-06-15-41-14-271_com.tencent.mm.jpg
Screenshot_2023-09-06-16-10-31-838_com.tencent.mm.jpg

搜索中心

Screenshot_2023-09-06-15-41-56-070_com.tencent.mm.jpg
Screenshot_2023-09-06-15-46-41-398_com.tencent.mm.jpg
Screenshot_2023-09-06-15-43-13-842_com.tencent.mm.jpg
Screenshot_2023-09-06-15-43-30-766_com.tencent.mm.jpg
Screenshot_2023-09-06-15-43-48-286_com.tencent.mm.jpg
Screenshot_2023-09-06-15-44-43-278_com.tencent.mm.jpg
Screenshot_2023-09-06-15-45-11-496_com.tencent.mm.jpg
Screenshot_2023-09-06-15-46-10-907_com.tencent.mm.jpg

每日推荐

Screenshot_2023-09-06-16-08-10-700_com.tencent.mm.jpg

歌单中心

Screenshot_2023-09-06-16-11-53-556_com.tencent.mm.jpg
Screenshot_2023-09-06-16-12-33-298_com.tencent.mm.jpg

排行榜

Screenshot_2023-09-06-16-14-40-045_com.tencent.mm.jpg

电台中心

Screenshot_2023-09-06-16-15-44-937_com.tencent.mm.jpg
Screenshot_2023-09-06-16-16-09-102_com.tencent.mm.jpg

视频中心

Screenshot_2023-09-06-16-20-59-848_com.tencent.mm.jpg
Screenshot_2023-09-06-16-21-34-472_com.tencent.mm.jpg

个人中心

Screenshot_2023-09-06-16-22-48-608_com.tencent.mm.jpg
Screenshot_2023-09-06-16-23-08-571_com.tencent.mm.jpg

最近播放

Screenshot_2023-09-06-16-23-55-422_com.tencent.mm.jpg
Screenshot_2023-09-06-16-24-16-889_com.tencent.mm.jpg
Screenshot_2023-09-06-16-25-15-096_com.tencent.mm.jpg
Screenshot_2023-09-06-16-25-39-147_com.tencent.mm.jpg

我的收藏

Screenshot_2023-09-06-16-30-11-973_com.tencent.mm.jpg
Screenshot_2023-09-06-16-30-50-908_com.tencent.mm.jpg
Screenshot_2023-09-06-16-30-56-899_com.tencent.mm.jpg
Screenshot_2023-09-06-16-31-42-347_com.tencent.mm.jpg

编辑资料

Screenshot_2023-09-06-16-36-18-634_com.tencent.mm.jpg
Screenshot_2023-09-06-16-34-46-944_com.tencent.mm.jpg
Screenshot_2023-09-06-16-34-56-834_com.tencent.mm.jpg
Screenshot_2023-09-06-16-34-50-373_com.tencent.mm.jpg

详情信息展示

播放列表页

Screenshot_2023-09-06-16-46-07-789_com.tencent.mm.jpg
Screenshot_2023-09-06-16-41-09-074_com.tencent.mm.jpg

歌单/电台 展示页

Screenshot_2023-09-06-16-48-47-385_com.tencent.mm.jpg
Screenshot_2023-09-06-16-50-23-349_com.tencent.mm.jpg

评论区

Screenshot_2023-09-06-16-52-28-426_com.tencent.mm.jpg
Screenshot_2023-09-06-16-52-45-662_com.tencent.mm.jpg
Screenshot_2023-09-06-16-53-07-010_com.tencent.mm.jpg
Screenshot_2023-09-06-16-53-56-769_com.tencent.mm.jpg

播放器页面

音乐播放器

Screenshot_2023-09-06-17-04-20-984_com.tencent.mm.jpg
Screenshot_2023-09-06-17-01-04-748_com.tencent.mm.jpg
Screenshot_2023-09-06-17-06-27-179_com.tencent.mm.jpg
Screenshot_2023-09-06-16-59-52-960_com.tencent.mm.jpg

视频播放器

Screenshot_2023-09-06-17-08-59-806_com.tencent.mm.jpg
Screenshot_2023-09-06-17-09-20-629_com.tencent.mm.jpg
Screenshot_2023-09-07-15-22-32-622_com.tencent.mm.jpg
Screenshot_2023-09-07-15-22-26-850_com.tencent.mm.jpg

二次开发

克隆运行

克隆到本地

例如

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

安装依赖

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

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

构建依赖

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

img

img

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

img

部署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'
}

不校验合法域名

img

编译运行

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

img

项目目录结构说明

顶层目录

J0M~$F736@PKVLP27[]TG{H.png
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: 存放主包中的静态资源文件

image.png
flx-TDesign.scss: 修改TDesign样式
iconfont.scss: 阿里巴巴图标字体样式
index.scss: 存放一些共用样式类
variable.scss: 定义了一系列css样式变量

behaviors: 存放主包中公用的behaviors

image.png
injectAppStore.js: 可以向组件或者页面注入应用的状态，例如tab-bar当前的索引值
injectCheckLogin.js: 注入检查登录相关的函数
injectMusicPlayerStore.js：注入音乐播放器相关的状态
injectUserStore.js：注入用户相关的状态

components: 存放主包中的组件

image.png
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

image.png

comment-item

image.png

info-item-card

image.png

music-player

my-loading

image.png

play-controll

image.png

program-display-list

image.png

song-display-list

image.png

song-list

image.png

touch-panel

一个触摸面板组件，可以触发触摸，滑动事件，判断滑动方向，滑动距离等。
在音乐播放器组件（music-player）中，个人中心-个人背景卡片中，有使用。

注意：以上组件均在app.json中注册了，可以全局使用

home-center: 存放首页中会用到的组件
├─components
│  ├─home-center
│  │  ├─home-item-card
│  │  └─rank-list-card

home-item-card

image.png

rank-list-card

image.png

personal-center：存放个人中心页会用到的组件
├─components
│  ├─personal-center
│  │  ├─collect-songList
│  │  └─create-songList

collect-songList

image.png

create-songList

video-center: 存放视频中心页会用到的组件
├─components
│  └─video-center
│      ├─commend-video
│      ├─commend-video-item
│      └─mv-video

commend-video

image.png

commend-video-item

image.png

mv-video

image.png

config: 存放配置文件

image.png

export default {
  baseUrl: 'http://127.0.0.1:3000',
  cookieKey: 'cookie', //cookie保存本地的key名称
  blogUrl: 'www.maofu123.top',
  searchHistoryKey: 'searchHistory'
}

custom-tab-bar: 自定义tab-bar组件

image.png
image.png

data: 存放一些会用到的数据

image.png
存放了省份，城市信息

miniprogram_npm: npm包

image.png

node_modules: npm包

image.png

packages: 存放分包

image.png
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-displayimage.png
playlist-item-displayimage.png
search-listimage.png
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-centerScreenshot_2023-09-06-16-11-53-556_com.tencent.mm.jpg
playlist-displayScreenshot_2023-09-06-16-48-47-385_com.tencent.mm.jpg
playlist-tagsScreenshot_2023-09-06-16-12-33-298_com.tencent.mm.jpg
recommended-dailyScreenshot_2023-09-06-16-08-10-700_com.tencent.mm.jpg
recommended-playlistimage.png
search-centerScreenshot_2023-09-06-15-46-10-907_com.tencent.mm.jpg
toplist-centerScreenshot_2023-09-06-16-14-40-045_com.tencent.mm.jpg

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-itemimage.png
mc-albumimage.png
mc-djimage.png
mc-videoimage.png
rp-album最近播放-专辑
rp-dj最近播放-电台
rp-song最近播放-歌曲
rp-songList最近播放-歌单
rp-video最近播放-视频
rp-voice最近播放-声音

pages
页面名称功能
edit-infoScreenshot_2023-09-06-16-36-18-634_com.tencent.mm.jpg
my-collectionScreenshot_2023-09-06-16-30-11-973_com.tencent.mm.jpg
mylike-videoScreenshot_2023-09-06-16-30-50-908_com.tencent.mm.jpg
recent-playScreenshot_2023-09-06-16-23-55-422_com.tencent.mm.jpg

template
模板名称功能
mc-item-card我的收藏-信息展示模板
image.png
image.png
image.png
rp-item-card最近播放-信息展示模板
image.png
image.png转存失败，建议直接上传图片文件

packges-sys: 系统分包，存放了登录相关的页面。
├─packages
│  ├─package-sys
│  │  ├─assets
│  │  │  └─img
│  │  └─pages
│  │      └─login

pages
页面名称功能
loginScreenshot_2023-09-06-16-02-40-878_com.tencent.mm.jpg

packges-video-center: 视频中心分包
├─packages
│  └─package-video-center
│      ├─components
│      │  └─video-play-item
│      └─pages
│          └─video-player

components
组件名称功能
video-play-item视频播放器-每一项
Screenshot_2023-09-06-17-08-59-806_com.tencent.mm.jpg

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-cardimage.png

home-center：存放首页中会用到的模板
模板名功能
rank-list-itemimage.png

personal-center：存放个人中心页会用到的模板
模板名功能
more-operations-itemimage.png

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错误拦截器

我的开发笔记

封装 wx.request

具体实现请查看项目文件下的 utils/request.js

样式相关

使用 scss

rpx问题：在scss中没有rpx这个单位

使用 iconfont

在小程序中不能使用本地字体

TabBar页面

从其他页面跳转tabbar页面时,当前tabbar索引不会改变

behaviors注入stroe

需求

每次使用 mobx-miniprogram-bindings 来为组件，页面绑定状态仓库都很麻烦，我们可以写一个 behavior 来实现代码的复用。

创建一个behavior

import {
  createStoreBindings
} from 'mobx-miniprogram-bindings'
import {
  appStore
} from '@/store/app/app'


export const injectAppStore = Behavior({
  data: {

  },
  lifetimes: {
    attached() {
      this.storeBindings = createStoreBindings(this, {
        store: appStore,
        fields: ['tabBarIndexValue'],
        actions: ['setTabBarIndexValue']
      })
    },

    /**
     * 监听页面卸载
     */
    detached() {
      this.storeBindings.destroyStoreBindings()
    }
  }
})

使用 behavior

import {
  injectAppStore
} from '@/behaviors/injectAppStore'

Component({
  behaviors: [injectAppStore],
  ...
})

现在你可以在该组件/页面中使用 tabBarIndexValue变量，setTabBarIndexValue方法了，例如：this.data.tabBarIndexValue。
注意你最早只能在 onReady生命周期中访问到仓库中的数据。

上传图片

可以封装wx.uploadFile
UploadTask | 微信开放文档

工具

获取相对时间

dayjs
Time from now · Day.js
其他
Java 实现时间戳显示格式为几天前、几分钟前、几秒前及其应用_时间用分钟展示是前端处理还是后端_Williams_ Z的博客-CSDN博客
js 时间戳转换成几分钟前，几小时前，几天前（亲测有效）_js,时间戳往前3分钟_Adam——的博客-CSDN博客

报错和解决

Unexpected token Date

wxs中使用date创建实例报错_wxs不支持date_天心天地生的博客-CSDN博客

[ WXML 文件编译错误] ./utils/filter-wxs/filter.wxs
Unexpected token `Date`
   9 |   },
  10 |   formatMsgTime: function (timespan) {
> 11 |     var dateTime = new Date(timespan) // 将传进来的字符串或者毫秒转为标准时间
     |                           ^
  12 |     var year = dateTime.getFullYear()
  13 |     var month = dateTime.getMonth() + 1
  14 |     var day = dateTime.getDate()

解决：
获取当前日期使用getDate()

将
var dateTime = new Date(timespan)
替换为
var dateTime = getDate(timespan)

微信API接口

后台播放音频

获取全局唯一的背景音频管理器。 小程序切入后台，如果音频处于播放状态，可以继续播放。但是后台状态不能通过调用API操纵音频的播放状态。
从微信客户端6.7.2版本开始，若需要在小程序切后台后继续播放音频，需要在 app.json 中配置 requiredBackgroundModes 属性。开发版和体验版上可以直接生效，正式版还需通过审核。

需要在app.json中添加如下字段：

{
  "requireBackgroundModes": ["audio"],
}

BackgroundAudioManager | 微信开放文档

注意事项

不能通过this.data.userInfo拿到数据

使用mobx-miniprogram-bindings绑定userStore时,
userInfo确实会被添加在this.data中,但是在一些较早的生命周期中，不能通过this.data.userInfo拿到数据。

方式一

import {
  userStore
} from '@/store/user/user'
import {
  createStoreBindings
} from 'mobx-miniprogram-bindings'

export const injectUserStore = Behavior({
  lifetimes: {
    attached() {
      this.storeBindings = createStoreBindings(this, {
        store: userStore,
        fields: ['userInfo', 'isUserLogin', 'collectSongList', 'userLikeSongLIst'],
        actions: ['setUserInfo', 'updateUserInfo', 'clearUserInfo']
      })
    },
    detached() {
      this.storeBindings.destroyStoreBindings()
    }
  }
})

image.png
image.png
方式二

image.png
在一些其他生命的周期中的情况

/**
   * 生命周期函数--监听页面初次渲染完成
   */
onReady() {
  console.log(this.data.userInfo, '555')
},

/**
   * 生命周期函数--监听页面显示
   */
onShow() {
   console.log(this.data.userInfo,'jjj')
},

image.png

注意：
目前来看，不可以在onLoad,第一次onShow中通过this.data.userInfo来拿到数据；
最早可以在onReady中来拿到数据。

参考

相关视频参考
尚硅谷微信小程序开发（零基础小程序开发入门到精通）_哔哩哔哩_bilibili
网易云音乐api接口
github.com/Binaryify/N…

avatar
文章
阅读
粉丝