React Hook TypeScript 实现仿网易云移动端页面

缘起

最近捣鼓了 React Hook，想写个页面试试手

GitHub 地址

源代码 Github
包里面整合了 网易云音乐 API

代码目录和结构

/src 页端代码部分
/app.js API 入口
/build 页端代码打包的位置
/module API 接口部分

页面构建之后会，服务端的首页会改变

效果页面

技术栈

• React Hook: Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。文档

• ant-mobile: 主要是一些图标和 Tab 组件，其他没用到。 文档

• TypeScript: JavaScript 的超集。文档

• Less: CSS 预处理器

• 其他：fetch API数据交互，React Context API 页面状态管理，Hash 实现页面路由

实现页面

推荐音乐(首页)

首页主要是由歌单和歌曲列表组成。

热歌榜

主要还是歌曲列表，默认加载 20 条，后续通过 IntersectionObserver API 实现无限滚动。

搜索列表

搜索页面，支持热关键词，搜索历史，通过 CompositionStart CompositionEnd 事件实现中文输入，通过 dangerouslySetInnerHTML 实现搜索结果关键词高亮。

播放界面

简单的播放页面，支持歌词和设置进度条进度，歌词滚动是实现是通过 translateY 改变坐标来实现的，在手机端看歌词还是有 BUG，在浏览器看没问题

歌单页面

标签简介还有歌曲列表。

代码执行

• 服务端启动

  npm run start 或者 node app.js
  

  默认端口 2999，首页是构建之后的页面

• 页端启动

  npm run dev
  

  页面运行运行需要启动服务端，默认端口 3000

• 页端构建

  npm run build
  

感谢

网易云音乐 API 页面请求的资源
网易云音乐移动端 H5 页面 页面的布局参考，还有部分图标资源