发现音乐新方式：”云音乐“微信小程序【开源项目】_微信小程序的在线音乐播放器

在线文档

云音乐 (yuque.com)

简介

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

主要功能特点

1. 音乐搜索和播放： 通过云音乐，您可以轻松搜索和播放数百万首歌曲，包括最新的热门单曲和经典老歌。

2. 个人化推荐： 云音乐会根据您的听歌习惯和喜好向您推荐新音乐，让您不断发现新的音乐宝藏。

3. 歌词同步显示： 想要跟着歌词一起唱？云音乐会将歌词实时同步显示，让您更深入地感受音乐的魅力。

4. 创建播放列表： 您可以轻松创建和管理自己的播放列表，根据心情或场合随时切换不同的音乐列表。

5. 开源项目： 云音乐是一个开源项目，您可以自由查看和修改其源代码，根据自己的需求进行定制。

6. 使用开源API接口：云音乐使用了开源的api接口，可以运行在node.js等服务端中，你可以轻松的部署自己的接口服务器。

7. 视频播放器：你可以观看歌曲MV等视频。

8. 歌单中心，视频中心，电台中心，排行榜，搜索中心，用户收藏，用户观看记录...

技术栈

视频预览

登录

https://lark-video.oss-cn-hangzhou.aliyuncs.com/outputs/prod/yuque/2023/34576819/mp4/1694152030703-e2f1906c-258e-40ac-aca8-fc6b7e39534f.mp4?OSSAccessKeyId=LTAI4GGhPJmQ4HWCmhDAn4F5&Expires=1694238003&Signature=aDEGtomQzfjdJsipDC3fCLlxUWk%3D 

首页

https://lark-video.oss-cn-hangzhou.aliyuncs.com/outputs/prod/yuque/2023/34576819/mp4/1694151744571-3d67653a-510c-41be-b4dd-e717fb2b9b03.mp4?OSSAccessKeyId=LTAI4GGhPJmQ4HWCmhDAn4F5&Expires=1694238003&Signature=qSRZj%2Fh7RAiZsg6PGCASTIvOYsE%3D 

视频中心

https://lark-video.oss-cn-hangzhou.aliyuncs.com/outputs/prod/yuque/2023/34576819/mp4/1694151456779-1a812bd8-39f4-4e7e-8da2-b54c44946107.mp4?OSSAccessKeyId=LTAI4GGhPJmQ4HWCmhDAn4F5&Expires=1694238003&Signature=rYJwibAyPxDIQ0SC0CKz1WW5MUg%3D 

个人中心

https://lark-video.oss-cn-hangzhou.aliyuncs.com/outputs/prod/yuque/2023/34576819/mp4/1694151477145-9d40ac7b-d42d-41a6-952d-effc1c4a3898.mp4?OSSAccessKeyId=LTAI4GGhPJmQ4HWCmhDAn4F5&Expires=1694238003&Signature=6dw1FhyFzBKybYlIZkq3S3lXXT0%3D 

音乐播放器

https://lark-video.oss-cn-hangzhou.aliyuncs.com/outputs/prod/yuque/2023/34576819/mp4/1694151531400-bff35aef-7f8b-461f-a48a-c042d192b233.mp4?OSSAccessKeyId=LTAI4GGhPJmQ4HWCmhDAn4F5&Expires=1694238003&Signature=MTzntgiCDSojmI%2FAIFRgFTDD77M%3D 

视频播放器

https://lark-video.oss-cn-hangzhou.aliyuncs.com/outputs/prod/yuque/2023/34576819/mp4/1694151580916-9c80cdde-4d99-41ec-986b-3bb25a7c8401.mp4?OSSAccessKeyId=LTAI4GGhPJmQ4HWCmhDAn4F5&Expires=1694238003&Signature=VUZ0r1JjuiWQM4wA5ARpmK7eGAI%3D

图片预览

登录

首页

搜索中心

每日推荐

歌单中心

排行榜

电台中心

视频中心

个人中心

最近播放

我的收藏

编辑资料

详情信息展示

播放列表页

歌单/电台 展示页

评论区

播放器页面

音乐播放器

视频播放器

二次开发

克隆运行

克隆到本地

例如

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

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

pages

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

pages

template

packges-sys: 系统分包，存放了登录相关的页面。

├─packages
│  ├─package-sys
│  │  ├─assets
│  │  │  └─img
│  │  └─pages
│  │      └─login

pages

packges-video-center: 视频中心分包

├─packages
│  └─package-video-center
│      ├─components
│      │  └─video-play-item
│      └─pages
│          └─video-player

components

pages

pages: 存放主包中的页面

├─pages
│  ├─TB-home
│  ├─TB-personal-center
│  └─TB-video

store: 状态管理仓库

├─store
│  ├─app
│  ├─musicPlayer
│  └─user

template: 存放主包中的模板

├─template
│  ├─common
│  │  └─info-display-card
│  ├─home-center
│  │  └─rank-list-item
│  └─personal-center
│      └─more-operations-item

common：存放公用的模板

home-center：存放首页中会用到的模板

personal-center：存放个人中心页会用到的模板

utils: 存放主包中工具性质的文件

└─utils
    │  getArea.js
    │  localStorage.js
    │  request.js
    │  util.js
    │
    ├─filter-js
    │      filter.js
    │
    └─filter-wxs
            filter.wxs

API 接口文档

接口官网

网易云音乐 NodeJS 版 API

我的分享-Apifox

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

相关问题

如何修改拦截器

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

我的开发笔记

封装 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()
    }
  }
})

方式二

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

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

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

注意：

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

参考

相关视频参考 尚硅谷微信小程序开发（零基础小程序开发入门到精通）哔哩哔哩bilibili

网易云音乐api接口 GitHub - Binaryify/NeteaseCloudMusicApi: 网易云音乐 Node.js API service