点击进入JS分支
项目预览

使用react hooks+redux+typescript+immer编写的仿网易云音乐移动端web项目。
特别鸣谢huangyi大佬的课程Vue2.0开发企业级移动端音乐Web App，以及神三元大佬的小册React Hooks 与 Immutable 数据流实战

• react v16.13: react全家桶
• redux: 状态管理容器
• redux-thunk: 处理异步逻辑的redux中间件
• react-lazyload: 懒加载库
• typescript: javascript的超集
• immer: 一个不可变数据的库
• axios: 基于promise的HTTP库
• swiper: 著名轮播图插件
• better-scroll: huangyi大佬的移动端滚动插件
• react-app-rewired customize-cra: 在不暴露eject的情况下修改webpack配置
• NeteaseCloudMusicApi: 开源的NodeJS版api接口

• 推荐页面

  • 轮播图
  • 推荐歌单
  • 推荐新歌

• 歌手列表页面

  • 选择分类（根据歌手首字母筛选）
  • 歌手列表
  • 上拉刷新、下拉加载更多（分页功能）

• 歌手详情页面

  • 歌曲列表

• 排行榜页面

  • 官方榜单
  • 全球榜单

• 歌单页面

  • 歌曲列表

• 搜索页面

  • 防抖远程搜索
  • 热门搜索关键词
  • 搜索结果列表

• 歌曲播放

  • 只要有歌曲列表的地方，都可以直接点击播放
  • 全屏播放
  • 底部播放
  • 歌曲控制（暂停、播放、上一首、下一首）
  • 歌词解析、展示、滚动
  • 播放列表

1. 所有组件的文件夹命名用大驼峰，文件命名用小驼峰，出口文件使用index命名；
2. 插件命名使用大驼峰，其他所有文件和文件夹均使用小驼峰；
3. 样式通过scss和css Modules结合来进行编写，所有的css类名全部小写，并用-连接；
4. 定义scss变量，并配置webpack全局注入；
5. 网络请求相关requests文件夹中；
6. 全局类型声明统一放在typings文件夹中，再分类管理，组件类型声明放在各组件文件夹的typing.ts文件中；
7. 工具方法统一放在utils文件夹中，再分类管理；
8. 插件统一放在plugins文件夹中；
9. 页面组件和业务模块组件统一放在pages文件夹中，页面组件作为容器组件，用于处理数据、逻辑和布局，业务模块组件是对应页面的UI组件，只负责UI不负责逻辑；
10. 通用组件和其它UI组件统一放在components中；
11. 不使用class组件，统一使用函数式组件和hooks；
12. 所有组件使用memo进行包裹，避免不必要的渲染；
13. 组件内部状态使用useState，业务数据全部用redux管理；
14. 组件内部书写顺序：
    • 解构props的属性
    • 解构props的方法
    • 解构redux中的数据
    • useState管理组件内部状态
    • useRef
    • useEffect
    • 其他逻辑代码
    • jsx代码
15. redux规范：
    • redux结合immerjs
    • 每个页面模块有自己独立的reducer，放在对应文件夹下的store文件夹下，在全局的store中通过combineReducer合并
    • ajax请求放在actions中，由redux-thunk处理
    • 使用react-redux hooks的useSelector和useDispatch，不再使用connect

git clone https://github.com/sanjings/react-hooks-ts-music.git

cd react-hooks-music-h5
git submodule init
git submodule update

npm install pnpm -g
cd NeteaseCloudMusicApi
pnpm install
cd ..
pnpm install

yarn start or npm run start

yarn build or npm run build

欢迎pr，喜欢就赏个⭐吧，谢谢支持