Git Product home page Git Product logo

neteasemusic's Introduction

Vue全家桶高仿网易云音乐

功能最多,按照ios客户端高仿,还有小程序版嘞

网易忠粉,去年小程序刚出来时候开始用小程序写过一版高仿ios版网易云音乐。一直在踩坑,基本完成后开始考虑用vue实现(其实是懒,想脱坑)。vue之前仅限于活动页使用,全家桶没用过,所以这次也是边学边做,很多东西来回重写了好多次。

技术栈

  1. Vue全家桶(vue,vue-router,vuex)
  2. axios(http)
  3. mint-ui+移植原来小程序版的css
  4. node(接口服务),地址在这里
  5. 图片资源来自ios端解压缩文件

项目地址, 欢迎 star,issue

vps ip已经被封 无法在线预览

  1. Vue版https://github.com/sqaiyan/neteasemusic
  2. 小程序版https://github.com/sqaiyan/netmusic-app
  3. node后端https://github.com/sqaiyan/netmusic-node

部署

后端项目

# 克隆node后端代码到本地
git clone [email protected]:sqaiyan/netmusic-node.git

cd netmusic-node 

# install dependencies
npm install 

# serve at localhost:3000
node app.js

前台项目

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

预览图gif版比较大

2 2 2 2 2 2 2 2 2 2 2 2 2 2 2

小程序版预览图gif

已完成功能

  1. 首页(个性推荐,分类歌单,电台推荐,热门排行
  2. 搜索(hot ,history ,suggest ,multimatch; 单曲,歌单,歌手,mv等。。。
  3. 详情单页类(歌单,歌手,电台,专辑,评论,用户,相似推荐,每日推荐
  4. 播放页(单曲,FM,节目:上下一曲,播放模式[单曲,随机,顺序],单曲喜欢,单曲收藏到歌单,fm trash,快进快退,歌词,播放列表
  5. 我的(登录,云盘,收藏

待完成功能(根据api破解情况

  1. 评论(操作类
  2. 动态
  3. 音质切换
  4. 歌词翻译 ....

存在的问题或bug

  1. 单曲播放进入评论等前进页面,单曲播放完自动播放下一曲后页面回退回播放页面 路由自动切换不了,会播放上一曲,逻辑这块没理顺

  2. 目前的api基本都是根据官网版扒下来的,git上发布的一些也基本都是这样,客户端接口用的是最新版的 没有能力扒出来。存在问题是banner接口请求到的是老接口数据,已经不维护了的数据

如果本例对您学习Vue有帮助,欢迎赏杯奶茶喝

neteasemusic's People

Contributors

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