来B站开发自己的Bombscreen直播吧
浏览：896 次
准备
确保计算机上安装了Electron vue-cli3，并且有一定的vue基础
我是基于Electron+Vue开发的。当然，React也是可行的。此处仅显示Vue。
为了方便起见，我提供了一个npm包，用于获取B站的弹幕，目前还不是很完美，它是与您一起开发的。
安装
$npm i bili danmu loader yl--保存
使用
从“bili danmu loader yl”导入DanmuLoader；
常量加载程序=新DanmuLoader（）；
//设置房间号
loader.setRoomID（123456）；
//拦河坝回调
装载机。onadd=i=>{
//统软云加入了新的弹幕。I是一个包含新收到的弹幕的数组
控制台日志（i）；
}
装载机。startLoader（（）=>{
//已成功开始加载弹幕
//成功的
} , () => {
//成功
//失败
});
//关闭弹幕加载
loader.closeLoader（）；
开门见山
这件事应该从一只蝙蝠说起（不，我在家呆了很长一段时间后没什么事可做，所以我们只谈一下整个炸弹屏幕姬？
首先，让我们安装预构建
建议使用淘宝的图片
npm安装-g cnpm--注册表=
然后我们开始安装
cnpm安装电子预装
然后初始化项目，然后YeuolyDanmu填写自己的项目名称
vue init simulatedgreg/电子vue Yeuoly Danmu
重新安装项目
Npm init//安装
Npm run dev//以开发人员模式启动
好了，现在项目安装好了，我们可以正式开始编写代码了
首先，删除原有的Electron Vue接口，只留下App。至于Vue，接口和路由应由每个人定义。无论如何，使用它是可以的。我只负责提供这里的核心部分
我定义了自己的路线，如下所示
从“Vue”导入Vue
从“vue Router”导入路由器
Vue.use（路由器）
导出默认新路由器({
路线：[
{
路径：“/”，
名称：“索引”，
组件：require（'@/views/Index.vue'）。默认，
元：{
标题：“默认目录”
},
儿童：[
{
name:'log'，
路径：'/index/log'，
component:require（'@/components/items/Logger.vue'）.default，
元：{
标题：“日志”
}
},
{
name:'任务'，
路径：'/index/task'，
组件：require（'@/views/Task.vue'）。默认，
元：{
标题：“任务”
}
},
{
name:'房间设置'，
路径：'/index/房间设置'，
component:require（'@/views/RoomSettings.vue'）.default，
元：{
标题：“房间设置”
}
}
]
},
{
路径：“*”，
重定向：“/index/log”
}
]
})
我定义了三个接口，一个用于日志，一个用作控制台，一个用来设置。让我们看看核心控制台
想想我们脑海中的弹幕。应该有多个窗口？是否应该有一个辅助窗口来显示该窗口？所以我决定在开始获取弹出屏幕后启动第二个窗口。这里我们使用一个插件。一个大家伙为我们提供了一个插件，可以快速创建窗口
npm i-S电子窗口
有关特定api，请参阅作者的文档。我这里不详细介绍
好了，现在在任务界面中定义我们的窗口打开方法
const win=此。$win.openWin({
宽度：300，
高度：700，
useContentSize：true，
Web首选项：{
网络安全：false
},
可调整大小：true，
帧：假，
titleBarStyle:false，
窗口配置：{
路由器：“/danmu”，
名称：'弹出窗口'，
}
});
让我提一下，windowConfig中的路由器是一个路由路径。有什么用？
新窗口将使用该路线的组件作为其索引，也就是说，当创建新窗口时，它将显示该路线的组成部分
所以我们需要添加一条路线
{
路径：“/danmu”，
名称：“danmu”，
component:（）=>导入（'@/views/DanmuDialog.vue'）
},
既然已经建立了窗口，让我们实现窗口通信。因为不管怎样，我们都需要把弹幕送到弹幕窗口，否则人们就得不到弹幕。这里我们使用ipc通信，这是Electron提供的通信方法。Electron允许主进程和渲染进程之间的通信。我们的弹幕窗口和主窗口都是渲染过程，因此我们需要将主进程用作实现通信的桥梁
这里需要提到的是，有些人可能不知道电动汽车
在渲染过程中，即***。我们使用
const ipc=require（'电子'）.ipcRenderer；
为了获得通信实例，ipc发送的信息。send被发送到主进程，而不是ipc。sendTo可用于发送到指定的窗口。我用这里的第一个
在main/index.js中
let main窗口；
let danmuWindowID；
然后是一件非常痛苦的事情。我们
