Fulongのblog

Electron笔记

2023/03/10 FrontEnd 共 3007 字，约 9 分钟

Electron笔记

Electron是什么？

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

注意 因为 Electron 将 Node.js 嵌入到其二进制文件中，你应用运行时的 Node.js 版本与你系统中运行的 Node.js 版本无关。

安装

node --version
npm --version

npm install -g electron

electron --version

# 运行
electron ./main.js

入门、文件读写

main.js进行窗口创建。设置主进程

窗口创建时就是load一个index.html。 html里可以有js，比如view.js。这个就是渲染进程。

渲染进程也可以进行文件读写和进行http请求。

渲染进程可以用主进程一样的东西，只不过此时用的是remote的electron。

进程模型

chrome进程模型

chrome默认会启动主进程，和两个子进程，然后每打开一个标签页会启动两个进程，当页面加载完成其中一个进程会结束，只剩一个进程用于渲染和交互和网络请求，以后每个标签页都会重复这个过程。

electron

Electron 为我们提供了 2 个 IPC（进程间通信）模块，分别称为 ipcMain 和 ipcRenderer。

ipcMain 模块用于从主进程异步通信到渲染进程。 在主进程中使用时，该模块处理从渲染器进程（网页）发送的异步和同步消息。 从渲染器发送的消息将被发送到此模块。

ipcRenderer 模块用于从渲染器进程到主进程的异步通信。 它提供了一些方法，因此您可以将同步和异步消息从渲染器进程（网页）发送到主进程。 您还可以接收来自主进程的回复。

我们将创建一个主进程和一个渲染器进程，它们将使用上述模块相互发送消息。

事例请参考

主进程

// Event handler for asynchronous incoming messages
ipcMain.on('asynchronous-message', (event, arg) => {
   // Event emitter for sending asynchronous messages
   event.sender.send('asynchronous-reply', 'async pong')
})

// Event handler for synchronous incoming messages
ipcMain.on('synchronous-message', (event, arg) => {
   // Synchronous event emmision
   event.returnValue = 'sync pong'
})

渲染进程

// Synchronous message emmiter and handler
console.log(ipcRenderer.sendSync('synchronous-message', 'sync ping')) 

// Async message handler
ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg)
})

// Async message sender
ipcRenderer.send('asynchronous-message', 'async ping')


小结
send函数是异步的
sendSync是同步的。

只能渲染进程给主进程主动 同步/异步推消息，然后主进程根据情况同步/异步回消息。对于同步消息只能同步回。 个人理解 待确定

建议不要在渲染器进程上执行繁重/阻塞任务的计算。 始终使用 IPC 将这些任务委托给主进程。 这有助于保持应用程序的速度。

系统UI

对话框、菜单等

   const {dialog} = require('electron') 
   const fs = require('fs') 
   dialog.showOpenDialog(xxxx....

打开文件对话框只能在主进程里操作。渲染进程发消息给主进程，主进程打开对话框选文件，然后文件内容发给渲染进程。

桌面应用程序带有两种类型的菜单——应用程序菜单（在顶部栏）和上下文菜单（右键菜单）。

我们将使用两个模块 - Menu 和 MenuItem 模块。 请注意，Menu 和 MenuItem 模块仅在主进程中可用。 要在渲染器进程中使用这些模块，您需要 remote 模块。

可以是系统菜单，也可以是鼠标右键菜单，可以替换的。如果是鼠标右键菜单是在渲染进程里。

  • Electron - 系统托盘 系统托盘是应用程序窗口之外的菜单。 在 MacOS 和 Ubuntu 上，它位于屏幕的右上角。 在 Windows 上，它位于右下角。 我们可以使用 Electron 在系统托盘中为我们的应用程序创建菜单。

系统托盘操作在渲染进城里。

        globalShortcut.register('CommandOrControl+O', () => {
            ipcRenderer.send('openFile', () => {
               console.log("Event sent.");
            })
            
            ipcRenderer.on('fileData', (event, data) => {
               document.write(data)
            })
         })

调试

Electron - 环境变量

序号变量 & 说明
1ELECTRON_ENABLE_LOGGING将 Chrome 的内部日志打印到控制台。
2ELECTRON_ENABLE_STACK_DUMPING在 Electron 崩溃时将堆栈跟踪打印到控制台。
3ELECTRON_DEFAULT_ERROR_MODEElectron 崩溃时显示 Windows 的崩溃对话框。
export ELECTRON_ENABLE_LOGGING=true
export ELECTRON_ENABLE_STACK_DUMPING=true
export ELECTRON_DEFAULT_ERROR_MODE=true

Electron - 调试

我们有两个进程运行我们的应用程序 — 主进程和渲染器进程。

由于渲染器进程是在我们的浏览器窗口中执行的，我们可以使用 Chrome 开发工具对其进行调试。

要调试在主进程中执行的 JavaScript，您需要使用外部调试器并使用 –debug 或 –debug-brk 开关启动 Electron。 请参考原文。可用vscode。可以加断点。

打包

打包成mac.app 或者win.exe等。

参考 打包您的应用程序

forge使用

安装

npm install --save-dev @electron-forge/cli
npx electron-forge import

打包

npm run make

该脚本最终运行了 electron-forge make 命令。

npm run用了package.json转成了上述命令。

然后就可以看到app了。

参考

Search

    Table of Contents

    Popular Posts