uni-caldey-music

基于uni-app框架使用Vue3+TypeScript开发跨端高性能网易云音乐微信小程序🎵
采用组合式API+Hooks进行逻辑抽离🎵
封装通用组件📦，实现高性能无限下拉加载列表组件♾️+虚拟列表组件，动态计算列表组件高度自适应不同尺寸屏幕🖥
集成骨架屏+loading动画+节流防抖函数，大幅度提升用户体验
Pinia实现全局多功能Audio播放控件🎵支持进度条拖拽+歌词跳转+歌词自动居中滚动定位功能，支持微信小程序音乐后台播放🎵

平台兼容性

平台	兼容性
H5	✅
微信小程序	✅

未测试其他小程序平台，理论上进行部分代码修改就可以完成兼容🤔

在线Demo（H5端）

⚠️⚠️⚠️请勿使用VPN访问本Demo，会造成接口返回数据异常且无法正常播放歌曲

请使用浏览器手机模式预览👀

http://182.92.202.161:3003/

接口部署

若希望体验最佳效果请根据文档本地部署Node服务或使用自己的高性能云服务器，⚠️同时更换项目src/config/config.ts内baseUrl

本项目接口使用网易云音乐接口部署阿里云Node服务

本地Node部署：

git clone git@github.com:Binaryify/NeteaseCloudMusicApi.git
cd NeteaseCloudMusicApi
npm install
node app.js
// 默认端口号3000，可以使用以下命令改变端口号
PORT=xxxx node app.js // Mac/Linux
set PORT=4000 && node app.js  // windows

运行

git clone git@github.com:CalDey/uni-caldey-music.git
cd uni-caldey-music
npm install
npm run dev:h5  // H5
npm run dev:mp-weixin // 微信小程序

项目预览（展示gif较大，图片加载较慢）

首页完全组件化开发

// index.vue
<template>
  <view>
    <Swiper />  // 轮播图
    <Search />  // 搜索组件
    <RecommendPlayList /> // 推荐歌单组件
    <NewSong /> // 新歌推荐组件
  </view>
  <Player />  // 全局播放器组件
</template>

搜索组件

热门搜索Tag + 智能联想功能（防抖优化）

对歌单列表加载进行优化，区分歌单数据一次性返回和触底加载新数据两种情况封装了两个组件：

虚拟列表组件

数据一次性全部返回，此处gif展示为200+歌曲的歌单

触底加载组件
通过Hooks组件useList对接口返回列表数据处理相关代码的逻辑抽离+封装PlayList列表组件,节省大量重复代码：

多功能音乐播放控件🎵

通过Pinia管理全局Audio实例

CSS实现声波形状进度条组件

实现歌曲切换，歌单循环播放/单曲循环/随机播放，歌词实时滚动，进度条跳转，歌词跳转，歌词居中定位跟随等功能

播放列表默认顺序播放，播放列表只有一首歌时播放完毕自动停止
播放到会员歌曲和试听版本会自动检测并跳到下一首

歌曲切换Loading动画特效：

开发进度日志📒

• 首页
• 歌单列表
• 歌单详情页
• 歌手列表
• 歌手详情页
• 封装useScrollH获取实时scroll组件高度
• 全局音乐播放组件🎵
• 播放列表组件
• 多功能播放控件
• 声波进度条组件
• 歌词同步，歌词跳转，进度条跳转，歌词自动居中跟随
• 搜索组件
• 封装防抖节流函数
• 封装虚拟列表组件（歌曲数量超过100首的歌单性能优化）
• 封装useList Hooks抽离异步获取列表数据及下拉加载相关代码

微信小程序运行

使用uni-app运行项目
修改manifest.json配置文件下mp-weixin.appid

微信小程序真机调试卡顿？

1.打开微信开发者工具🔧 -> 设置 -> 通用设置 -> 关闭使用GPU加速模式❌
2.切换真机调试2.0，性能明显优于真机调试1.0