React16.6和Typescript高仿B站Web移動端

前言

本項目是一個高仿B站移動端項目，基於我以前搭建過的SSR服務端渲染模板開發，開發的初衷是想使用此模板進行實戰，實戰後才能說明模板的可靠性。前端大部分都是頁面展現，基本上沒什麼可仿的，看多了就會以爲膩，就選了B站，核心功能在於視頻播放和彈幕，主要用於學習和交流，還請B站團隊海涵。數據來源於B站，我寫了一個後端服務作接口代理，源碼和預覽地址在最後，接口部分不開源

服務端渲染相關連接： 1.項目搭建 2.先後端路由同構 3.代碼分割和數據預取

技術點

• react
• react-router-dom
• react-router-config
• redux(數據管理)
• redux-thunk(支持異步Action)
• react-helmet(Head管理)
• react-lazyload(圖片懶加載)
• loadable-components(代碼分割)
• cross-fetch(瀏覽器和node通用的Fetch API)
• express(後端服務)

實現功能

• 首頁
• 分類頁
• 排行榜
• 搜索
• 視頻詳情頁
  1.視頻播放
  2.彈幕
  3.推薦列表
  4.評論列表
• UP主頁
  1.詳情
  2.投稿列表
• 我的中心
  歷史記錄

說明

目錄結構

React

本項目使用了React16.3新加入的Context API、createRef API和如下兩個新的生命週期

• static getDerivedStateFromProps(props, state)
• getSnapshotBeforeUpdate(prevProps, prevState)

另外在16.6版本中加入了contextType

接口

接口作了跨域限制，只容許源http://localhost:3010訪問，可進行修改

圖片和視頻

圖片使用了接口作代理，請求圖片流而後返回，圖片接口驗證了請求頭，http://localhost:3010域下的頁面都可訪問。 視頻和圖片同樣驗證了請求頭，http://localhost:3010域下的頁面都可訪問，視頻採用了斷點下載，實現了點播，不須要等待視頻所有加載完就能夠跳到中間位置開始播放

彈幕

安卓瀏覽器中會對HTML5的video進行劫持，老是在最上層播放，並加上本身的控件，而且沒法調節層級，在安卓手機中彈幕會沒法正常觀看，IOS手機沒有這樣的問題

屏幕截圖

源碼

Github

但願你們能夠給個Star，謝謝啦～