【构建】react打造你的第一个Bilibili首页开发项目

·  阅读 1285
【构建】react打造你的第一个Bilibili首页开发项目

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第1天,点击查看活动详情

【构建】react打造你的第一个Bilibili首页开发项目

简 介

Hello 小极客们,如果觉得本文还不错,记得点个赞或者给个 star,你们的赞和 star 是我编写更多更丰富开源项目的动力![新手开发学习必备] (做个b站,细节拉满!(持续更新))

技术栈

  • React Hooks全家桶
  • JavaScript 小白都会的一门语言
  • ant design - mobile 时下流行移动端最爽框架
  • axios 数据请求 + fastmock 数据接口
  • styled-components 样式开发
  • classnames 动态添加类名 npm包

【】 简单易学,童叟无欺(doge)

实现的部分功能

一. 分区的选择

1. 路由的实现

chrome-capture-2022-5-23 (3).gif

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样式的绑定 + 分区选择之超长自动滚动

chrome-capture-2022-5-23 (1).gif

<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. 下拉菜单的组件引入

chrome-capture-2022-5-23 (4).gif

<Dropdown arrow={<DownOutline />}>
          <Dropdown.Item key='sorter' title=''>
               <div style={{ padding: 12 }}>
                   <div>拉取数据Test</div>
                   <div>Test</div>
                   <div>真好玩</div>
               </div>
           </Dropdown.Item>
</Dropdown>

二. 视频数据的请求与细节功能实现

屏幕截图 2022-06-23 140046.png

1. 视频数据请求

import axios from 'axios'

export const getVideos = () =>
    axios.get(`https://www.fastmock.site/mock/c4ece9fff3bb5ad98093439f16f136be/bLike/videolist`)

2. 细节功能实现

2.1. 播放量与弹幕数 数字格式化

  • 封装了一个 数字格式化 的 func 在 utils 下,供调用
  • 如图 蓝色高亮笔区域

屏幕截图 2022-06-23 140046 - 副本.png

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. 视频封面请求失败时 实现默认图片替换

  • 如图 黄色高亮笔区域

屏幕截图 2022-06-23 140046 - 副本.png

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 噢 ~

(做个b站,细节拉满!(持续更新))

Cavan 的 react 开发 -- 【构建】

免责声明:该项目为自玩仿B站项目,与B站官方无关。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改