仿网易云音乐小程序-uniapp

前言

可直接访问Gitee:https://gitee.com/wenqingkey/wenqing-music

本项目使用uniapp + node.js构建。
本项目仅用于学习。

关于后端

node后台

网易云音乐 Binaryify/NeteaseCloudMusicApi

接口文档

网易云音乐 NodeJS 版 API

参考项目

本项目参考千锋uni-app框架实战网易云音乐项目并在其基础上做了优化

  1. 解决榜单列表页与歌曲播放页filter背景模糊白边问题
  2. 解决歌曲播放页一些歌曲封面比较白、亮作为背景会导致页面文字不清晰的问题
  3. 优化很多地方文本溢出问题(包括各页面歌名,歌词、页面标题…)
  4. 优化歌曲多个歌手显示问题
  5. 优化歌单播放完成最后一首歌无下首歌曲与搜索歌曲播放完报错问题
  6. 新增播放/暂停时摇杆动画效果
  7. 使用setTimeout替换setInterval(为什么要用 setTimeout 替换 setInterval)
  8. 使用scss替换css(个人习惯)
  9. 新增歌曲搜索框进入页面与清除内容自动聚焦
  10. 新增热评与最新评论切换显示功能
  11. 解决微信小程序端返回上一页/返回主页按钮组与小程序自带的胶囊按钮对齐问题,比如刘海屏、水滴屏会有错位

在线预览

温情云音乐

效果展示

首页

仿网易云音乐小程序-uniapp_第1张图片

排行榜详情页

仿网易云音乐小程序-uniapp_第2张图片

歌曲播放页

仿网易云音乐小程序-uniapp_第3张图片 暂停 仿网易云音乐小程序-uniapp_第4张图片 播放
仿网易云音乐小程序-uniapp_第5张图片 最热 仿网易云音乐小程序-uniapp_第6张图片 最新

搜索页

仿网易云音乐小程序-uniapp_第7张图片搜索 仿网易云音乐小程序-uniapp_第8张图片 提示 仿网易云音乐小程序-uniapp_第9张图片 结果

运行项目

git clone https://gitee.com/wenqingkey/wenqing-music.git

npm install

因为是 uniapp 项目所以介意使用 HBuilder 直接在工具栏->运行中运行

联系我

如有疑问

仿网易云音乐小程序-uniapp_第10张图片

你可能感兴趣的:(uniapp,微信小程序)