GithubHelp home page GithubHelp logo

maojiu-bb / lvmusic Goto Github PK

View Code? Open in Web Editor NEW

This project forked from lv-z-l/lvmusic

0.0 0.0 0.0 449 KB

An app based on uni-app imitating Apple Music

License: MIT License

JavaScript 19.44% CSS 4.92% HTML 0.79% Vue 70.24% SCSS 4.60%

lvmusic's Introduction

基于NeteaseCloudMusicApi 的API开发的 高颜值 多端 第三方音乐项目。

PC: LVMusic

☀️ 亮点

  • ✅ 拥有 Apple Music 的颜值,玻璃拟态风格
  • ✅ 简约大气、无广告
  • ✅ 轻量 打包后体积一共 316kb,运行在 Chrome 后 memory 大概 7M 左右,加载的数据多了会大一些
  • ✅ KeepAlive 实现组件缓存
  • ✅ 异步加载组件 按需加载
  • ✅ 多端适配(wx 小程序、PC)
  • ✅ 网易云扫码登录(PC 很方便;小程序需要截图再扫码,没有找到对接微信登录的接口🙁)
  • ✅ 暗黑模式适配
  • ✅ 按照显示宽高请求图片,不让浏览器去缩放,提升性能

👨🏿‍💻 技术选型

  • 技术栈没得说了,拥抱 Vite、Vue3
  • 没有多端经验,那就用 uni 吧,我倒是要看看是不是像吹得那么牛逼
  • 全局状态管理没的说 pinia
  • 路由就不需要了,毕竟小项目嘛,逻辑不太复杂,页面也不多,就不用 VueRouter 了,整个动态组件就 OK
  • i18n 也不需要了,项目简单,用 pinia 也能玩
  • css 扩展——sass, 抽离 css 变量,维护更方便
  • UI 组件库就不用了,uni 内置组价够用,别的就自己封装吧
  • 图标 iconfont 找了一套字体图标
  • 图片素材也是 iconfont 找的
  • logo 来自 标小智, 输入关键字会生成很多可选的 logo,然后需要付费下载,付费是不存在的!直接给水印去掉,再利用 Chrome 的 screenshot 拿到图片(清晰度不好,再找个网址修复下,哈哈)
  • UI 方面,我直接抄了 Apple Music 和 网易云音乐 的作业😄

📜 开源许可

本项目仅供个人学习研究使用,禁止用于商业及非法用途,由使用者造成的所有违法违规后果与本项目及本人无关。

基于 MIT license 许可进行开源。

🎆 界面展示

推荐页

PC

image.png

wx小程序

我的

PC

image.png

wx小程序

歌单页

PC

image.png

wx小程序

歌曲列表

PC

image.png

wx小程序

播放器界面

PC

image.png

wx小程序

封装组价梳理

在项目中,我封装了很多基础组件 和 业务组件。

基础组件

组件 组件用处
NoData 无数据组件
NoLogin 未登录组件
Message 提示消息
Loading 数据加载中组件(h5是指令,小程序不支持指令)
LazyLoader 图片懒加载组件
PageFrame 页面容器组件,向下滚动标题吸顶,滑到底部加载更多数据
Process 进度条组件

业务组件

组件 组件用处
SongListItem 歌曲条目组件
SongSheet 歌曲组件
Category 歌单列表
Search 搜索组件,防抖处理
Player 播放器组件
MySpace 我的
Recommend 推荐页
...... ......

二次开发、学习

前端

git clone https://github.com/lv-z-l/LVMusic.git

//启动
yarn dev:h5

接口请参考:NeteaseCloudMusicApi 启动后再 .env.development 中更改对应的代理地址即可。

部署相关

  • 前端使用 unicloud托管
  • 接口使用 腾讯云服务部署,三个月额度内免费(NeteaseCloudMusicApi文档写的十分详细)

lvmusic's People

Contributors

lv-z-l avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.