【实战】electron 制作远程控制软件（预）

Posted 2023-04-30

参考技术A

上一篇 electron API

傀儡端告知控制端本机的控制码
》》》建立端与控制码的联系（ 服务端需求 ）

控制端输入控制码连接傀儡端
》》》通过控制码找到用户（ 服务端需求 ）
》》》建立控制端和傀儡端的连接（ 服务端需求 or 客户端需求 ）

傀儡端将捕获的画面发送到控制端
》》》捕捉画面、播放画面（ 客户端需求 ）
》》》用户间画面传输（ 服务端需求 / 客户端需求 ）

控制端发送鼠标/键盘指令到傀儡端
》》》捕获指令（ 客户端需求 ）
》》》用户间指令传输（ 服务端需求 / 客户端需求 ）

傀儡端响应控制指令
》》》响应指令（ 客户端需求 ）

在 Electron 和 Vue 中加载预加载脚本

【中文标题】在 Electron 和 Vue 中加载预加载脚本

【英文标题】：Loading preload script in Electron and Vue

【发布时间】：2019-10-21 23:56:48

【问题描述】：

我正在使用 Vue CLI 3 和 vue-cli-plugin-electron-builder 打包我的 Vue Electron 应用程序，但我无法让我的 preload.js 脚本用于电子工作。

主窗口

win = new BrowserWindow(
  width: 800,
  height: 600
  webPreferences: 
    nodeIntegration: false,
    preload: path.join(__dirname, "/../src/preload.js") // works but window.electron.dialog in undefined
  
);

preload.js

const  dialog  = require("electron");

window.electron = ;
window.electron.dialog = dialog;

window.electron.dialog 在我的 Vue 组件中始终未定义 - 导入显然不起作用。请注意，window.electron 已正确定义。我一定是错过了什么。

【参考方案1】：

将以下行添加到文件 vue.config.js 中，如果该文件不存在，则在项目的根文件夹中创建一个

module.exports = 
 //...
 pluginOptions: 
  electronBuilder: 
    preload: 'src/preload.js',
    // Or, for multiple preload files:
    // preload:  preload: 'src/preload.js', otherPreload: 'src/preload2.js' 
  
 
 //...

查看文档了解更多#preload-files

【参考方案2】：

解决方案比预期的要简单。导入在 window.onload 事件中起作用。

window.onload = () => 
  const  dialog  = require("electron").remote;

  window.electron = ;
  window.electron.dialog = dialog; // now set properly
;

【讨论】：

我仍然无法让它工作...... require("electron") 在此处返回 undefined。