一款可登陆网易云账号的移动端音乐播放器IMBX

万老师
905 阅读2分钟

基于 React, Redux, lib-flexible, Ant Design,webpack,react-scripts,网易云音乐 API,打造的一款可登陆网易云账号的移动端音乐播放器IMBX 👏

项目操作示范

项目操作示范

项目结构

项目结构

build—存放webpack编译后打包好的文件
NeteaseCloudMusicApi-master-网易云音乐API
public-存放项目图标(favicon.ico)、index.html、manifest.json、项目截图.png
src

api-存放改装过的axios以及api
common-存放静态css、js、images
component-组件，主要有以下组成

DrawerBox.js-音乐列表页更多蒙版
Header.js-通用顶部导航
InputBox.js-登陆输入框（含逻辑判断）
MusicList.js-播放页面显示音乐列表蒙版
MusicLyric.js-歌曲歌词组件
MusicPlayer-之前项目没有重构时的主要播放器组件，但是因为逻辑和视图混乱，之后会去掉
Player.js-纯音乐播放器组件（无逻辑判断），传入获取的音乐列表MusicList即可
SearchHeader.js-搜索组件（之后完善）
SingleMusic.js-单曲音乐组件，无逻辑判断，重写样式
SongSheet.js-推荐歌单单曲组件样式，无逻辑判断

pages-页面组成

Find.js-包括个性推荐和主播电台两个栏目
Login.js-登陆页面
LoginDetails.js-登陆内页
Mrtj.js-每日推荐页
PageDetails.js-播放主页，包括核心播放器、歌词显示以及音乐列表，但是这三个是分开的，没有关联
SongSheet.js-推荐歌单块（之后写成通用的歌单组件）
store-Redux逻辑判断模块
actionCreator.js-进行主要逻辑判断，包括上一首、下一首播放、点击歌曲播放逻辑控制等
actionTypes.js-定义type常量
index.js-连接React和Redux
reducer.js-改变定义的全局state
App.js-Router路由控制
index.js-根节点，定义Provider存放store
config-overrides.js-使用antd组件的必要设置文件，如想详细学习请参考 ant.design/docs/react/…

package.json-存放dependencies、proxy、scripts等，在这里修改为react-scripts启动

技术栈

客户端

  • React:"^16.7.0",

1.支持ES6语法，支持箭头函数

2.px2rem————使用atom插件px2rem-plus对750px设计图进行px->rem的转换，如果你使用的不是atom，可以网上搜搜如何使用，sublime插件名叫px2rem

3.sass预编译css语言

  • Redux:"^4.0.1"
  • react-redux:"^6.0.0"
  • react-router:"^4.3.1"
  • antd:"^3.12.2"
  • axios:"^0.18.0"
  • lyric-parser:"^1.0.1"

歌词核心组件

  • react-scripts:"2.1.3"

1.使用webpack@3.11.0版本,webpack-dev-server@2.9.7，webpack-dev-server如果是3.x编译就会出错mmp......

2.支持热更新————react-app-rewired start

dev指令————package.json文件中webpack-dev-server --inline --progress --hot --config build/webpack.dev.conf.js


  • lib-flexible

在index.js入口文件头部引入————import 'lib-flexible'

基本所有样式都按照750px设计图写，使用px2rem插件转成rem

字体单独定义

.font-dpr(@font-size){
    font-size: @font-size;

    [data-dpr="2"] & {
        font-size: @font-size * 2;
    }

    [data-dpr="3"] & {
        font-size: @font-size * 3;
    }
}

服务器端

NeteaseCloudMusicApi-master-网易云音乐API 3.4.0最新版本

使用方法

  • cd NeteaseCloudMusicApi-master,然后输入命令npm start

  • 打开新的控制台，cd IMBX,npm i

  • npm run build

  • npm start

avatar
文章
阅读
粉丝