内容简介：本项目是一个高仿B站移动端项目，基于我之前搭建过的SSR服务端渲染模板开发，开发的初衷是想使用此模板进行实战，实战后才能说明模板的可靠性。前端大部分都是页面展示，基本上没什么可仿的，看多了就会觉得腻，就选了B站，核心功能在于视频播放和弹幕，主要用于学习和交流，还请B站团队海涵。数据来源于B站，我写了一个后端服务做接口代理，源码和预览地址在最后，接口部分不开源服务端渲染相关链接：1.项目搭建本项目使用了
本项目是一个高仿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和以下两个新的生命周期
另外在 16.6 版本中加入了contextType
接口
接口做了跨域限制，只允许源 http://localhost:3010 访问
图片和视频
图片使用了接口做代理，请求图片流然后返回，图片接口验证了请求头， http://localhost:3010 域下的页面均可访问。 视频和图片一样验证了请求头， http://localhost:3010 域下的页面均可访问，视频采用了断点下载，实现了点播，不需要等待视频全部加载完就可以跳到中间位置开始播放
以上所述就是小编给大家介绍的《React16.6和Typescript高仿B站Web移动端》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- 移动端专题系列（二）移动端动画
- 【移动端DL框架】当前主流的移动端深度学习框架一览
- T 沙龙移动实践日（201808）—— 蜂鸟团队移动端异常监控体系建设
- MongoDB收购移动数据库初创公司Realm 加速向移动市场扩张
- 【移动端适配】用vw、vh＋媒体查询打造最完美的移动端适配方案
- 谷歌下架 600 款广告欺诈 App，猎豹移动全部 45 款被封！猎豹移动回应了
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
HTML 压缩/解压工具
在线压缩/解压 HTML 代码
JSON 在线解析
在线 JSON 格式化工具