发现音乐新方式：”云音乐“微信小程序【开源项目】

【仿造网易云音乐APP，利用开源API接口实现微信小程序端的音乐应用。】功能特点：音乐搜索和播放：通过云音乐，您可以轻松搜索和播放数百万首歌曲，包括最新的热门单曲和经典老歌。个人化推荐：云音乐会根据您的听歌习惯和喜好向您推荐新音乐，让您不断发现新的音乐宝藏。歌词同步显示：想要跟着歌词一起唱？云音乐会将歌词实时同步显示，让您更深入地感受音乐的魅力。创建播放列表：您可以轻松创建和管理自己的播放

MaofU呀

614人浏览 · 2023-09-20 19:27:42

MaofU呀 · 2023-09-20 19:27:42 发布

在线文档

云音乐 (yuque.com)

简介

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

主要功能特点

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

技术栈

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

视频预览

图片预览

首页

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-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

构建依赖

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

开始构建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'
}

不校验合法域名

编译运行

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

项目目录结构说明

顶层目录

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: 存放主包中的静态资源文件

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	最近播放-信息展示模板

模板名称

功能

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接口，接口返回的数据均有示例。使用须知 - 小程序-云音乐

方法名	功能
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()
    }
  }
})

方式二

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

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

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

注意：

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

参考

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

AtomGit 开源协作平台测评赛

瓜分20万奖金获得内推名额丰厚实物奖励易参与易上手

更多推荐

白盒测试体系的探索 [ 光影人像东海陈光剑的博客 ]

什么是白盒测试？很多人都听说过白盒测试。通常的说法是，白盒测试是能看到全部产品源代码的测试。常常，白盒测试都是和牛人绑在一起的。个人认为这是一种比较狭隘的说法。然而究竟什么是白盒测试呢？可能有很多的人在做了很长时间的白盒测试以后发现，自己其实不是在做白盒测试，而是在做灰盒测试，原因是不够“白”，因为他没有看到全部的产品代码。其实，我个人认为，这是做白盒测试的误区。从广义来说，个人认为，白...

开放原子开发者工作坊

现代程序设计 homework-01

搞了6个小时individual project...看看博客做一做第一次现代程序设计作业1) 建立 GitHub 账户, 把课上做的 “最大子数组之和” 程序签入我的github地址是https://github.com/oldoldb,以前没有用过各种不熟练啊....代码我放到<现代程序设计课后作业>这个repository里了,是昨天完成的在hdu和poj上找的5道关于一...

开放原子开发者工作坊

精心收集的 48 个 JavaScript 代码片段，仅需 30 秒就可理解

原文：Chalarangelo 译文：IT168https://github.com/Chalarangelo/30-seconds-of-code#anagrams-of-string-with-duplicates该项目来自于 Github 用户 Chalarangelo，目前已在 Github 上获得了 5000 多Star，精心收集了多达 48 个有用的 JavaS...

开放原子开发者工作坊

所有评论(0)

查看更多评论

MaofU呀

@qq_62595450

已为社区贡献1条内容

发现音乐新方式：”云音乐“微信小程序【开源项目】

MaofU呀

在线文档

简介

主要功能特点

技术栈

视频预览

登录

首页

视频中心

个人中心

音乐播放器

视频播放器

图片预览

登录

首页

搜索中心

每日推荐

歌单中心

排行榜

电台中心

视频中心

个人中心

最近播放

我的收藏

编辑资料

详情信息展示

播放列表页

歌单/电台 展示页

评论区

播放器页面

音乐播放器

视频播放器

二次开发

克隆运行

克隆到本地

安装依赖

构建依赖

部署API接口服务

配置API接口地址

不校验合法域名

编译运行

项目目录结构说明

顶层目录

目录文件详解

assets: 存放主包中的静态资源文件

behaviors: 存放主包中公用的behaviors

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

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

home-center: 存放首页中会用到的组件

home-item-card

rank-list-card

personal-center：存放个人中心页会用到的组件

collect-songList

create-songList

video-center: 存放视频中心页会用到的组件

commend-video

commend-video-item

mv-video

config: 存放配置文件

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

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

miniprogram_npm: npm包

node_modules: npm包

packages: 存放分包

packges-common: 公共分包

pages

packges-home-center: 首页分包，存放了在首页中会进入的页面，要使用的组件，等等资源。

components

歌单/电台展示页

创建一个`behavior`

使用 `behavior`

Unexpected token `Date`

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