持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
【构建】react打造你的第一个Bilibili首页开发项目
简 介
Hello 小极客们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富开源项目的动力！[新手开发学习必备] (做个b站，细节拉满！（持续更新）)
技术栈
- React Hooks全家桶
- JavaScript 小白都会的一门语言
- ant design - mobile 时下流行移动端最爽框架
- axios 数据请求 + fastmock 数据接口
- styled-components 样式开发
- classnames 动态添加类名 npm包
【】 简单易学，童叟无欺（doge）
实现的部分功能
一. 分区的选择
1. 路由的实现
import { lazy } from 'react'
import { Route, Routes } from 'react-router'
const Shouye = lazy(() => import('../pages/Shouye'))
const Space = lazy(() => import('../pages/Space'))
const Donghua = lazy(() => import('../pages/Donghua'))
...
// 延迟加载，运行按需加载 当切换到这个路由后再加载 lazy
export default function RoutesConfig() {
return (
<>
<Routes>
<Route path='/' element={<Shouye />} />
<Route path='/shouye' element={<Shouye />} />
<Route path='/donghua' element={<Donghua />} />
<Route path='/fanju' element={<Fanju />} />
<Route path='/guochuang' element={<Guochuang />} />
<Route path='/yinyue' element={<Yinyue />} />
<Route path='/wudao' element={<Wudao />} />
<Route path='/youxi' element={<Youxi />} />
<Route path='/space' element={<Space />} />
<Route path='/sousuo' element={<Sousuo />} />
<Route path='/videodetail' element={<VideoDetail />} />
</Routes>
</>
)
}
- Details:别忘了引入路由配置的外层的 Suspense
import { Suspense } from 'react'
...
<Suspense fallback={<div>loading...</div>}>
<RoutesConfig />
</Suspense>
2. ActiveKey样式的绑定 + 分区选择之超长自动滚动
- 超长自动滚动 引入了antd-mobile 的 Tabs 组件 (Tabs 标签页 - Ant Design Mobile)
<Tabs defaultActiveKey='1' >
<Tabs.Tab title={<Link to="/shouye" className={classnames({ active: pathname == '/shouye' })}>
<span>首页</span>
</Link>} key='1'>
</Tabs.Tab>
<Tabs.Tab title={<Link to="/donghua" className={classnames({ active: pathname == '/donghua' })}>
<span>动画</span>
</Link>} key='2'>
</Tabs.Tab>
...
</Tabs>
- Details：需要点击的路由激发组件Link，居然放在了 Tabs.Tab 的 title 属性中！
- classnames 是为了给被点到的Link添加ActiveKay专有属性（变粉粉，加下面的线啦）
- 没试过的一定要试试 这个 npm ~
3. 下拉菜单的组件引入
- 来自 antd-mobile 的 试验性组件 Dropdown 下拉菜单（Dropdown 下拉菜单 - Ant Design Mobile）
<Dropdown arrow={<DownOutline />}>
<Dropdown.Item key='sorter' title=''>
<div style={{ padding: 12 }}>
<div>拉取数据Test</div>
<div>Test</div>
<div>真好玩</div>
</div>
</Dropdown.Item>
</Dropdown>
二. 视频数据的请求与细节功能实现
1. 视频数据请求
- 封装了 fastmock get请求接口
- 数据来自于 小破站 api （找了好久好久，才试到一个有用的，求个小赞吧！）SocialSisterYi/bilibili-API-collect: 哔哩哔哩-API收集整理【不断更新中....】 (github.com)
- src/api/request.js 数据 axios 封装到这个目录了嗷~
import axios from 'axios'
export const getVideos = () =>
axios.get(`https://www.fastmock.site/mock/c4ece9fff3bb5ad98093439f16f136be/bLike/videolist`)
2. 细节功能实现
2.1. 播放量与弹幕数 数字格式化
- 封装了一个 数字格式化 的 func 在 utils 下，供调用
- 如图 蓝色高亮笔区域
export const NumberFormat = (number) => {
if (number < 10000) {
return number;
} else {
if (Math.round((number % 10000) / 1000) == 0) {
return Math.round(number / 10000) + '万';
} else {
return (number / 10000).toFixed(1) + '万';
}
}
}
2.2. 视频封面请求失败时 实现默认图片替换
- 如图 黄色高亮笔区域
3. 待实现细节功能
目标功能 ( 正在实现，持续更新~ ）
1. 请求失败数据 全部替换默认数据
2. 下拉到视频底部，请求新视频推荐汇入
3. 上拉更新视频数据更新
4. API 远程拉取，解决 跨域问题
三. 项目架构
├─ bilibiliLike
├─ index.html
├─ package-lock.json
├─ package.json
├─ readme.md
├─ src
│ ├─ api
│ │ └─ request.js
│ ├─ App.css
│ ├─ App.jsx
│ ├─ assets
│ │ ├─ fonts
│ │ │ └─ iconfont.css
│ │ ├─ images
│ │ │ └─ common
│ │ │ ├─...
│ │ └─ styles
│ │ └─ reset.css
│ ├─ components
│ │ ├─ Card
│ │ │ ├─ index.jsx
│ │ │ ├─ style.css
│ │ │ └─ style.js
│ │ ├─ Header
│ │ │ ├─ index.jsx
│ │ │ └─ style.js
│ │ └─ VideoListBox
│ │ ├─ index.jsx
│ │ └─ style.js
│ ├─ config
│ ├─ index.css
│ ├─ main.jsx
│ ├─ modules
│ ├─ pages
│ │ ├─ Donghua
│ │ │ ├─ index.jsx
│ │ │ └─ style.js
│ │ ├─ Fanju
│ │ │ ├─ index.jsx
│ │ │ └─ style.js
│ │ ├─ ...
│ ├─ setupProxy.js
│ └─ utils
│ └─ index.js
└─ vite.config.js
四. 写在最后
项目持续更新，喜欢可以收藏，+ star 噢 ~
Cavan 的 react 开发 -- 【构建】
免责声明：该项目为自玩仿B站项目，与B站官方无关。