Electron+React高仿bilibili客户端

已于 2022-07-18 16:40:51 修改
阅读量606 收藏 2
点赞数 1
文章标签： 前端 electron javascript
于 2022-07-18 16:39:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48329085/article/details/125854583
版权
博主分享了一个使用React全家桶开发的Electron版Bilibili客户端，支持视频播放、鼠标悬停预览、弹幕等功能。项目集成Bilibili-API，方便二次开发。提供了安装包下载链接及项目特点介绍。
摘要由CSDN通过智能技术生成

最近闲的发慌索性研究开发个开源项目碰碰运气，希望大家能点点赞start一下以后也好跳槽😄😄，废话不多说咋们开始吧

github：GitHub - tiajinsha/bilibili: electron高仿bilibili客户端,支持直播+视频+弹幕+hover预览效果

安装包（提取码：n2qa）：https://pan.baidu.com/s/1SRZF5Of_i3mzb6diUC0Jag#list/path=%2F

项目特点：

  • ✅ 使用 react 全家桶开发
  • 📺 支持视频播放
  • 📃 支持鼠标悬停预览视频效果
  • 📃 支持弹幕
  • 🛠 electron 后台线程集成 bilibili-api。
  • 🖥️ 方便二次开发，其他功能开发中

项目首页：        

鼠标悬停预览视频和弹幕：

 视频详情

m0_48329085
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React-Native 高仿“掘金”客户端
wangdi的游戏社区
11-19 9489
历时3周时间不到的时间，前两周还有考试，利用一些琐碎的时间，终于把这个App基本的界面功能完成了。先来上图一张采用React-Native 0.36版本开发的，算是踩了不少坑，来简单总结一下吧。讲真，一款应用的用户忠诚度，UI绝对占有很大的关系，这也是我模仿掘金客户端的一个理由吧，里面涉及到的界面够花哨。就拿首页这张图来说，要实现这么一个图，需要层层嵌套，还要考虑左右对齐问题，所以基本这个“首页”
ReactNative 高仿美团外卖源码
12-15
ReactNative 高仿美团外卖源码ReactNative 高仿美团外卖源码
react-bilibili:高仿B站web移动端
04-29
react-bilibili 此项目仅供学习和交流，不得用于商业用途 高仿B站web移动端 本项目基于此模板，使用React16.8，Typescript开发 技术点 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.投稿列表 个人中心 历史记录 直播 直播列表 分类 直播间 1.直播播放 2.聊天弹幕 运行 先运行服务端接口，见
使用React高仿简书单页应用
m0_38021769的博客
11-16 387
React简书流程 初始化项目： create-react-app react-jianshu 安装样式管理工具(有效避免样式相互影响) yarn add styled-components 重置样式：ResetCSS 使用 redux/ react-redux进行数据管理 redux store action reducer API：createStore()、sto...
react版高仿饿了么webapp
weixin_34375054的博客
05-18 375
前言 一个月前滴滴外卖进军无锡，打起来外卖大战
Electron + React + Node.js + ES6 开发环境全配置好
06-16
"Electron + React + Node.js + ES6 开发环境全配置好" 指的是一个已经配置完整的开发环境，该环境结合了四个关键的技术组件：Electron、React、Node.js 和 ES6。这样的组合常用于构建跨平台的桌面应用程序，因为...
Y-Music:一个使用 Electron + React 开发的桌面音乐客户端
05-22
Y-Music是基于 React、Redux、Nedb、Electron 开发的网易云第三方桌面音乐客户端，数据API源自 。 暂时只支持win7或以上的window系统。 UI看人吧，我自己觉得挺好看的( 毕竟自己画的嘛哈哈哈[]~(￣▽￣)~* ),不过也...
electron框架+打包vue+react 成exe 安装下一步客户端桌面程序
08-28
将`Vue.js`或`React.js`集成到`Electron`项目中，可以让开发者利用这些框架的强大力量，创建出响应式且高效的桌面应用。 在使用`Electron`进行打包和部署时，有一些关键步骤和潜在问题需要注意。首先，确保安装了...
electron-react-webrtc:electron+react+webrtc 音视频等通信
05-25
About Electron electron + chrom内核 + node.js能力 + Native Api 拥有nodejs底层的能力 nativeApi跨平台原生的能力 为什么会出现PC版本 便捷入口 离线可用 安全需求 调用系统的能力 目前的桌面方案 Native QT NW....
数据提取工具—electron+react
04-02
1、用electron+react制作的一个数据提取工具，react渲染页面，electron主线程调用本地sqlite数据库 2、数据和依赖包删除了，测试的时候自行添加数据与依赖 3、开发测试，首先用npm start 启动react 然后再用electron...
reactjuejin一个高仿的掘金大部分是按照掘金的ui来实现的
08-12
react-juejin 一个高仿的掘金，大部分是按照掘金的ui来实现的
react-用React仿哔哩哔哩移动端
08-14
用React仿哔哩哔哩移动端
vue-bilibili：高仿bilibili PC端（koa + vue）
02-03
维比利比利 注：api的来源 使用 bilibili-api 练习、开发vue项目，仅此而已。 在src中引用网络图片无法显示，这因为在引用链接时，浏览器对地址发起请求加上了refre这个请求头，而有些服务器能根据refre反盗所以引用失败返回403。 <meta name="referrer" content="no-referrer"> 项目设置 npm install 编译和热重装以进行开发 npm run serve 开启Node服务 切换目录 cd bilibili-api 安装依赖 npm run install 运行程序 npm run dev
EasyVideo用Electron和Vue全家桶开发的桌面端视频播放器
08-12
Easy-Video 用Electron和Vue全家桶开发的桌面端视频播放器
基于Electron25+Vite4.x仿chatgpt客户端应用ElectronChatGPT
码农ICoding
06-10 3264
electron-chatgpt 使用最新桌面端技术Electron25.x结合Vite4.x全家桶技术开发跨端模仿ChatGPT智能聊天程序模板。支持经典+分栏两种布局、暗黑+明亮主题模式，集成electron封装多窗口及通讯功能。
撸了一个高仿 B站！
公众号：逛逛GitHub
03-20 4552
推荐一款开源的高仿 B站 移动端，该项目可以用于 React 技术栈的学习项目。前端使用的核心技术栈基于 React，后端服务使用 Express。开源地址：https://github....
记b站的一次react尝试
weixin_34133829的博客
01-28 195
由于本人喜欢看b站的一些视频，所以当我神奇的发现有个网页版的b站， 就打开了我内心的辣分躁动，一冲动就写了一个react版的b站，顺便学习一下。 ps（刚学习，还没接触到redux，所以代码中有很多重复的,后期想起来了就分离一下把！！！） 还有（后端来源仅为学习，有情况立马删除，做一个合格的舔狗。） 复制代码首先来给一个项目的构架图 从结构上来看components 里面是我的组件，page目录...
仿bilibili视频弹幕播放器介绍&搭建
不愿意做鱼的小鲸鱼の博客
09-19 4199
一款防bilibili的播放器，支持弹幕和后台管理，主要是这个播放器是仿B站的，很简洁，特别合适用来web开发。
vue ref和reactive区别
最新发布
灰海
08-25 1525
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Electron+React实战：架构师教你打造桌面云平台
"本课程是关于使用Electron和React框架构建跨平台桌面应用程序的实战教程，旨在帮助开发者掌握这两种技术的结合使用，从而创建出具备桌面应用特性的云平台应用。" 在当前的软件开发领域， Electron 和 React 的结合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值