Electron - CodeVoy

什么是 Electron#

Electron 是⼀个 跨平台 的 桌⾯应⽤ 开发框架，开发者可以使⽤：HTML、CSS、JavaScript 等 Web 技术来构建桌⾯应⽤程序，它的本质是结合了 Chromium 和 Node.js，现在⼴泛⽤于桌⾯应⽤程序开发，例如这写桌⾯应⽤都⽤到了 Electron 技术：

一款应用广泛的跨平台的桌面应用开发框架。
Electron 的本质是结合了 Chromium 与 Node.js
使用 HTML、CSS、JS 等 Web 技术构建桌面应用程序。

Electron = Chromium + Node.js + Native API(Electron 原生的 API)

TIP
CS架构的软件有个优点：它是存在我们电脑包里面的，你的电脑不被木马黑掉，那么这个软件就是没有问题的，网页的话各种接口、数据、图片我们都是可以看到的;
但是CS架构软件我们可以抓包，我们也可以进行防止抓包，CS软件要比BS更加安全
总的来说就是，速度快，安全（vscode就是electron开发的）

常见的桌面GUI#

名称	语音	优点	缺点
QT	C++	跨平台、性能好、生态好	依赖多，程序包大
PyQT	Python	底层集成度高、易上手	授权问题(收费)
WPF	C#	类库丰富、扩展灵活	只支持Windows，程序包大
WinForm	C#	性能好，组件丰富，易上手	只支持Windows，UI差
Swing	Java	基于AWT，组件丰富	性能差，UI一般
NW.js	JS	跨平台性好，界面美观	底层交互差、性能差，包大
Electron	JS	相比NW拓展更好	底层交互差、性能差，包大
CEF	C++	性能好，灵活集成，UI美观	占用资源多，包大

Electron 流程模型#

主进程就是个.js文件，这个 js 文件是个纯粹的 node 环境；主进程主要目的就是管理渲染进程；主进程可以管理多个渲染进程，主进程只有一个，渲染进程可以有n个

主进程是可以调用原生 API 的

一个窗口背后对应一个渲染进程，渲染进程就是浏览器环境，需要用 HTML、CSS、JS 来支撑

进程间的通信简称 IPC

TIP
Node 环境（Node.js runtime environment）的内置模块：核心 API，比如： fs（文件系统） http / https（网络） path（路径处理） os（系统信息）等等，还有 JS 执行环境（V8）；
Node 环境不包含 DOM / BOM，没有 window、document、alert、localStorage。因为 Node 不运行在浏览器里，它不关心页面。

搭建工程#

1
npm init
2

3
# 然后一路回车到底

修改package.json文件

1
{
2
  "name": "electron_test",
3
  "version": "1.0.0",
4
  "main": "main.js",
5
  "scripts": {
6
    "test": "echo \"Error: no test specified\" && exit 1"
7
  },
8
  "author": "zzy",
9
  "license": "ISC",
10
  "description": "this is a electron demo"
11
}

安装 Electron

1
npm i electron -D

修改这里：

1
  "scripts": {
2
    "start": "electron ."
3
  },

根目录创建 main.js 文件

1
const { app, BrowserWindow } = require("electron");
2

3
app.on("ready", () => {
4
  const win = new BrowserWindow({
5
    width: 800,
6
    height: 600,
7
    autoHideMenuBar: true, // 是否隐藏顶部菜单栏
8
    alwaysOnTop: false, // 是否一直置顶
9
  });
10
  win.loadFile("./pages/index.html");
11
});

关于 BrowserWindow 的更多配置项，请参考：BrowserWindow 实例属性

根目录创建pages/index.html文件以及pages/index.css文件

运行

1
npm start

此时开发者⼯具会报出⼀个安全警告，需要修改index.html，配置 CSP(Content- Security-Policy)

1
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"/>

上述配置的说明

default-src ‘self’ default-src：配置加载策略，适用于所有未在其它指令中明确指定的资源类型。 self：仅允许从同源的资源加载，禁止从不受信任的外部来源加载，提高安全性。
style-src ‘self’ ‘unsafe-inline’ style-src：指定样式表（CSS）的加载策略。 self：仅允许从同源的资源加载，禁止从不受信任的外部来源加载，提高安全性。 unsafe-inline：允许在 HTML 文档内使用内联样式。
img-src ‘self’ data: img-src：指定图像资源的加载策略。 self：表示仅允许从同源加载图像。 data:：允许使用 data: URI 来嵌入图像。这种 URI 模式允许将图像数据直接嵌入到 HTML 或 CSS 中，而不是通过外部链接引用。关于 CSP 的详细说明请参考：MDN-Content-Security-Policy、Electron Security

完善窗口行为#

Windows 和 Linux 平台窗⼝特点是：关闭所有窗⼝时退出应⽤。
mac 应⽤即使在没有打开任何窗⼝的情况下也继续运⾏，并且在没有窗⼝可⽤的情况下激活应⽤时会打开新的窗⼝。

在 main.js 中添加如下代码

1
const { app, BrowserWindow } = require("electron");
2

3
function createWindow() {
4
  const win = new BrowserWindow({
5
    width: 800,
6
    height: 600,
7
    autoHideMenuBar: true, // 是否隐藏顶部菜单栏
8
    alwaysOnTop: false, // 是否一直置顶
9
  });
10
  win.loadFile("./pages/index.html");
11
}
12

13
app.on("ready", () => {
14
  createWindow();
15
  app.on("activate", () => {
16
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
17
  });
18
});
19

20
app.on("window-all-closed", () => {
21
  if (process.platform !== "darwin") app.quit();
22
});

配置⾃动重启#

安装 Nodemon

1
npm i nodemon -D

修改 package.json 文件

1
"scripts": {
2
  "start": "nodemon --exec electron ."
3
}

配置 nodemon.json 规则根目录创建 nodemon.json 文件

1
{
2
  "ignore": ["node_modules", "dist"],
3
  "restartable": "r",
4
  "watch": ["*.*"],
5
  "ext": "html,js,css"
6
}

主进程与渲染进程#

主进程 每个 Electron 应⽤都有⼀个单⼀的主进程，作为应⽤程序的⼊⼝点。主进程在 Node.js 环境中运⾏，它具有 require 模块和使⽤所有 Node.js API 的能⼒，主进程的核⼼就是：使用BrowserWindow来创建和管理窗口。

渲染进程

每个 BrowserWindow 实例都对应一个单独的渲染器进程，运行在渲染器进程中的代码，必须遵守网页标准，这也就意味着：渲染器进程无权直接访问 require 或使用任何 Node.js 的 API。

问题产生：处于渲染器进程的用户界面，该怎样才与 Node.js 和 Electron 的原生桌面功能进行交互呢？

Preload 脚本#

预加载（Preload）脚本是运行在渲染进程中的，但它是在网页内容加载之前执行的，这意味着它具有比普通渲染器代码更高的权限，可以访问 Node.js 的 API，同时又可以与网页内容进行安全的交互。

简单说：它是 Node.js 和 Web API 的桥梁，Preload 脚本可以安全地将部分 Node.js 功能暴露给网页，从而减少安全风险。

预加载脚本应用

主进程：根目录的main.js

1
const { app, BrowserWindow } = require("electron");
2
const path = require("path");
3

4
function createWindow() {
5
  const win = new BrowserWindow({
6
    width: 800,
7
    height: 600,
8
    autoHideMenuBar: true, // 是否隐藏顶部菜单栏
9
    alwaysOnTop: false, // 是否一直置顶
10
    webPreferences: {   // 可以在安全的情况下，把 Node.js / Electron 的 API 暴露给网页。
11
      preload: path.resolve(__dirname, "./preload.js"),
12
    },
13
  });
14
  win.loadFile("./pages/index.html");
15
}
16

17
app.on("ready", () => {
18
  createWindow();
19
  app.on("activate", () => {
20
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
21
  });
22
});
23

24
app.on("window-all-closed", () => {
25
  if (process.platform !== "darwin") app.quit();
26
});

根目录下的perload.js

1
const { contextBridge } = require("electron");  // 从 Electron 引入 contextBridge，它是 上下文桥接 API。
2
console.log("proload...");
3

4
// exposeInMainWorld 的意思是：把对象注入到渲染进程的 全局 window 上。
5
contextBridge.exposeInMainWorld("myAPI", {
6
  version: process.version, // // Node.js 的版本号
7
});

pages/render.js

1
const btn1 = document.getElementById("btn1");
2

3
btn1.onclick = () => {
4
  alert(myAPI.version)
5
  console.log(window);
6
};

点击按钮后即可看到版本号

TIP

脚本的执行顺序：主进程->预加载脚本->渲染进程（preload.js 是一个预加载脚本，它会在渲染进程加载页面之前运行。）

预加载脚本可以使用一部分Node的API

进程通信（IPC）#

上文中的 preload.js ，无法使用全部 Node 的 API ，比如：不能使用 Node 中的 fs 模块，但主进程（main.js）是可以的，这时就需要进程通信了。简单说：要让 preload.js 通知 main.js 去调用 fs 模块去干活。

关于 Electron 进程通信，我们要知道：

IPC 全称为：InterProcess Communication ，即：进程通信。
IPC 是 Electron 中最为核心的内容，它是从 UI 调用原生 API 的唯一方法！
Electron 中，主要使用 ipcMain 和 ipcRenderer 来定义“通道”，进行进程通信。

渲染进程->主进程(单项)#

概述: 在渲染器进程中 ipcRenderer.send 发送消息,在主进程中使用 ipcMain.on 接收消息。

常用于: 在 Web 中调用主进程的 API,例如下面的这个需求:

需求: 点击按钮后,在用户的 D 盘创建一个 hello.txt 文件,文件内容来自于用户输入。

思路肯定是：从渲染进程拿到用户输入的信息，想办法通知给主进程，让主进程拿到用户的输入，写入D盘，hello.txt

页面中添加相关元素，render.js中添加对应脚本

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>Electron demo</title>
5
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"/>
6
    <link rel="stylesheet" href="./index.css" />
7
  </head>
8
  <body>
9
    <button id="btn1">按钮</button>
10
    <hr>
11
    <br>
12
    <br>
13
    <input id="input" />
14
    <button id="btn2">向D盘写入hello.txt</button>
15

16

17
    <script type="text/javascript" src="./render.js"></script>
18
  </body>
19
</html>

1
const btn1 = document.getElementById("btn1");
2
const btn2 = document.getElementById("btn2");
3
const input = document.getElementById("input");
4

5
btn1.onclick = () => {
6
  alert(myAPI.version);
7
  console.log(window);
8
};
9

10
btn2.onclick = () => {
11
  myAPI.saveFile(input.value);
12
};

preload.js 中使用 ipcRenderer.send('信道', 参数) 发送消息，与主进程通信。

1
const { contextBridge, ipcRenderer } = require("electron");
2
console.log("proload...");
3

4
contextBridge.exposeInMainWorld("myAPI", {
5
  version: process.version,
6
  saveFile: (data) => {
7
    ipcRenderer.send("file-save", data); // 渲染进程给主进程发送⼀个消息
8
  },
9
});

主进程中，在加载页面之前，使用 ipcMain.on('信道', 回调) 配置对应回调函数，接收消息。

1
const { app, BrowserWindow, ipcMain } = require("electron");
2
const fs = require("fs");
3
const path = require("path");
4

5
function writeFile(_, data) {
6
  fs.writeFileSync("D:/hello.txt", data);
7
}
8

9
function createWindow() {
10
  const win = new BrowserWindow({
11
    width: 800,
12
    height: 600,
13
    autoHideMenuBar: true, // 是否隐藏顶部菜单栏
14
    alwaysOnTop: false, // 是否一直置顶
15
    webPreferences: {
16
      preload: path.resolve(__dirname, "./preload.js"),
17
    },
18
  });
19
  ipcMain.on("file-save", writeFile);
20
  win.loadFile("./pages/index.html");
21
}

TIP
主进程你就引入ipcMain模块，渲染进程你就引入ipcRenderer模块。
ipcMain.on(channel, listener) – 监听指定通道的消息，当收到时调用 listener 函数。"file-save"：通道名，自定义字符串； writeFile：监听器函数（listener），这是一个回调函数。当消息到达时，Electron 会自动调用 writeFile
ipcRenderer.send(channel, ...args) – 向主进程发送异步消息；"file-save"：通道名，必须与主进程监听的相同。data：发送的数据；

渲染进程<=>主进程（双向）#

概述：渲染进程通过ipcRenderer.invoke发送消息，主进程使用ipcMain.handle接收并处理消息

备注: ipcRender.invoke 的返回值是 Promise 实例。

常用于：从渲染器进程调用主进程方法并等待结果，例如下面的这个需求：

需求：点击按钮从 D 盘读取 hello.txt 中的内容，并将结果呈现在页面上。

思路：渲染进程要想办法告诉主进程要读取hello.txt文件，主进程读取文件后，把文件内容返回给渲染进程，渲染进程再把文件内容呈现在页面上。

页面中添加相关元素，render.js中添加对应脚本

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <title>Electron demo</title>
5
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"/>
6
    <link rel="stylesheet" href="./index.css" />
7
  </head>
8
  <body>
9
    <button id="btn1">按钮</button>
10
    <hr>
11
    <br>
12
    <br>
13
    <input id="input" />
14
    <button id="btn2">向D盘写入hello.txt</button>
15
    <br>
16
    <br>
17
    <br>
18
    <hr>
19
    <button id="btn3">读取D盘中的hello.txt</button>
20

21
    <script type="text/javascript" src="./render.js"></script>
22
  </body>
23
</html>

preload.js 中使用 ipcRenderer.invoke('信道', 参数) 发送消息，与主进程通信。

1
const { contextBridge, ipcRenderer } = require("electron");
2
console.log("proload...");
3

4
contextBridge.exposeInMainWorld("myAPI", {
5
  version: process.version,
6
  saveFile: (data) => {
7
    ipcRenderer.send("file-save", data);
8
  },
9
   readFile: () => {
10
    return ipcRenderer.invoke("file-read");
11
  },
12
});

主进程中，在加载页面之前，使用 ipcMain.handle('信道', 回调) 接收消息，并配置回调函数。

1
const { app, BrowserWindow, ipcMain } = require("electron");
2
const fs = require("fs");
3
const path = require("path");
4

5
function readFile() {
6
  return fs.readFileSync("D:/hello.txt").toString();
7
}
8

9

10
function createWindow() {
11
  const win = new BrowserWindow({
12
    width: 800,
13
    height: 600,
14
    autoHideMenuBar: true, // 是否隐藏顶部菜单栏
15
    alwaysOnTop: false, // 是否一直置顶
16
    webPreferences: {
17
      preload: path.resolve(__dirname, "./preload.js"),
18
    },
19
  });
20
  ipcMain.on("file-save", writeFile);
21
  ipcMain.handle("file-read", readFile);
22
  win.loadFile("./pages/index.html");
23
}

TIP
const result = await ipcRenderer.invoke(channel, ...args);用于在预加载脚本中发起一个异步请求到主进程，并等待返回 Promise 结果的通信方法。

channel (必需): 一个字符串，是消息的通道名称或事件名称。。这个名称必须在主进程中由 ipcMain.handle()进行监听。

…args (可选): 一个或多个任意类型的参数，会作为参数传递给主进程中的处理函数。

返回值: 返回一个 Promise。

ipcMain.handle('channel-name', handler)

参数1：channel（通道名），类型：string；标识这个处理器监听哪个“频道”。必须与渲染进程 ipcRenderer.invoke(channel, …) 中的 channel 完全一致。

参数2：listener（监听器函数），类型：Function；当对应 channel 的请求到达时，执行这个函数。

WARNING
渲染进程与渲染进程之间是不能传东西的，可以用主进程作为中间人

打包应用#

使用 electron-builder 打包应用

安装 electron-builder：

1
npm install electron-builder -D

在 package.json 中进行相关配置，具体配置如下：

备注: json 文件不支持注释, 使用时请去掉所有注释。

1
{
2
  "name": "video-tools",
3
  "version": "1.0.0",
4
  "main": "main.js",
5
  "scripts": {
6
    "start": "electron .",
7
    "build": "electron-builder"
8
  },
9
  "build": {
10
    "appId": "com.atguigu.video",
11
    "win": {
12
      "icon": "./logo.ico",
13
      "target": [
14
        {
15
          "target": "nsis",
16
          "arch": [
17
            "x64"
18
          ]
19
        }
20
      ]
21
    },
22
    "nsis": {
23
      "oneClick": false,
24
      "perMachine": true,
25
      "allowToChangeInstallationDirectory": true
26
    }
27
  },
28
  "devDependencies": {
29
    "electron": "^30.0.0",
30
    "electron-builder": "^24.13.3",
31
    "author": "tianyu",
32
    "license": "ISC",
33
    "description": "A video processing program based on Electron"
34
  }
35
}

注释版本

``` { "name": "video-tools", // 应⽤程序的名称 "version": "1.0.0", // 应⽤程序的版本 "main": "main.js", // 应⽤程序的⼊⼝⽂件 "scripts": { "start": "electron .", // 使⽤ `electron .` 命令启动应⽤程序 "build": "electron-builder" // 使⽤ `electron-builder` 打包应⽤程序，⽣成安装包 }, "build": { "appId": "com.atguigu.video", // 应⽤程序的唯⼀标识符 // 打包windows平台安装包的具体配置 "win": { "icon":"./logo.ico", //应⽤图标 "target": [ { "target": "nsis", // 指定使⽤ NSIS 作为安装程序格式 "arch": ["x64"] // ⽣成 64 位安装包 } ] }, "nsis": { "oneClick": false, // 设置为 `false` 使安装程序显示安装向导界⾯，⽽不是⼀键安装 "perMachine": true, // 允许每台机器安装⼀次，⽽不是每个⽤户都安装 "allowToChangeInstallationDirectory": true // 允许⽤户在安装过程中选择安装⽬录 } }, "devDependencies": { "electron": "^30.0.0", // 开发依赖中的 Electron 版本 "electron-builder": "^24.13.3" // 开发依赖中的 `electron-builder` 版本 }, "author": "tianyu", // 作者信息 "license": "ISC", // 许可证信息 "description": "A video processing program based on Electron" // 应⽤程序的描述 } ```

拿一个script中的"build": "electron-builder"以及build中内容最终package.json内容如下

1
{
2
  "name": "electron_test",
3
  "version": "1.0.0",
4
  "main": "main.js",
5
  "scripts": {
6
    "start": "nodemon --exec electron .",
7
    "build": "electron-builder"
8
  },
9
  "build": {
10
    "appId": "com.atguigu.video",
11
    "win": {
12
      "icon": "./logo.png",
13
      "target": [
14
        {
15
          "target": "nsis",
16
          "arch": [
17
            "x64"
18
          ]
19
        }
20
      ]
21
    },
22
    "nsis": {
23
      "oneClick": false,
24
      "perMachine": true,
25
      "allowToChangeInstallationDirectory": true
26
    }
27
  },
28
  "author": "zzy",
29
  "license": "ISC",
30
  "description": "this is a electron demo",
31
  "devDependencies": {
32
    "electron": "^38.1.0",
33
    "electron-builder": "^26.0.12",
34
    "nodemon": "^3.1.10"
35
  }
36
}

执行打包命令

1
npm run build

如果打包报错，我们可以开启windows的开发人员模式，系统->开发人员模式；然后再执行打包命令就可以；

打包后的exe文件就在dist包下；

electron-vite#

electron-vite 是⼀个新型构建⼯具，旨在为 Electron 提供更快、更精简的体验

electron-vite 快速、简单且功能强⼤，旨在开箱即⽤。官⽹地址：https://cn-evite.netlify.app/

项目实战#

初始化项目#

1
npm init vite

安装依赖

1
npm i

1
npm i electron -D

删除 package.json 中的 “type”: “module”。改用 CommonJS 规范

根目录创建main.js文件

1
const { app, BrowserWindow } = require("electron");
2
const createWindow = () => {
3
  const win = new BrowserWindow({
4
    width: 1000,
5
    height: 800,
6
  });
7
};
8

9
app.whenReady().then(() => {
10
  createWindow();
11
});

修改package.json

1
"main": "main.js",
2
"scripts": {
3
  "start": "electron ."
4
},

安装nodemon

1
npm i nodemon -D

修改package.json

1
"scripts": {
2
  "start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"
3
},

去掉CSP(Content- Security-Policy)警告，在index.html添加：

1
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"/>

解决警告

安装

1
npm i electron-win-state -D

根目录创建preload目录，再创建index.js

最终根目录下的main.js

1
const { app, BrowserWindow } = require("electron");
2
const WinState = require("electron-win-state").default;
3
const path = require("path");
4

5
const createWindow = () => {
6
  const winState = new WinState({
7
    defaultWidth: 1000,
8
    defaultHeight: 800,
9
  });
10

11
  const win = new BrowserWindow({
12
    ...winState.winOptions,
13
    webPreferences: {
14
      preload: path.resolve(__dirname, "./preload/index.js"),
15
    },
16

17
  });
18

19
  win.loadURL("http://localhost:3000");
20
  win.webContents.openDevTools(); // 打开控制台
21
  winState.manage(win);
22
};
23

24
app.whenReady().then(() => {
25
  createWindow();
26

27
  app.on("activate", () => {
28
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
29
  });
30
});
31

32
app.on('window-all-closed', () => {
33
  if (process.platform !== 'darwin') app.quit()
34
})

package.json

1
{
2
  "name": "pin-box",
3
  "private": true,
4
  "version": "0.0.0",
5
  "main": "main.js",
6
  "scripts": {
7
    "dev": "vite",
8
    "build": "vite build",
9
    "preview": "vite preview",
10
    "start": "nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue"
11
  },
12
  "dependencies": {
13
    "vue": "^3.5.13"
14
  },
15
  "devDependencies": {
16
    "@types/electron": "^1.4.38",
17
    "@types/nodemon": "^1.19.6",
18
    "@vitejs/plugin-vue": "^5.2.1",
19
    "electron": "^38.1.0",
20
    "electron-win-state": "^1.1.22",
21
    "nodemon": "^3.1.10",
22
    "vite": "^6.0.1"
23
  }
24
}

启动项目 启动vite项目

1
npm run dev

启动electron

1
npm start

main.js中的load地址为vite项目的启动地址

优雅打开窗口 main.js中

1
const { app, BrowserWindow } = require("electron");
2
const WinState = require("electron-win-state").default;
3
const path = require("path");
4

5
const createWindow = () => {
6
  const winState = new WinState({
7
    defaultWidth: 1000,
8
    defaultHeight: 800,
9
  });
10

11
  const win = new BrowserWindow({
12
    ...winState.winOptions,
13
    webPreferences: {
14
      preload: path.resolve(__dirname, "./preload/index.js"),
15
    },
16
    show: false,
17
  });
18

19
  win.loadURL("http://localhost:5173");
20
  win.webContents.openDevTools(); // 打开控制台
21
  winState.manage(win);
22

23
  win.on("ready-to-show", () => {
24
    win.show();
25
  });
26
};
27

28
app.whenReady().then(() => {
29
  createWindow();
30

31
  app.on("activate", () => {
32
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
33
  });
34
});
35

36
app.on("window-all-closed", () => {
37
  if (process.platform !== "darwin") app.quit();
38
});

整理vue项目

删除components目录下的所有文件

修改App.vue

1
<template>
2
  <div>
3
    hello
4
  </div>
5
</template>
6

7
<script setup lang="ts">
8
import { ref, reactive, toRefs, onMounted} from 'vue'
9

10
</script>
11

12
<style scoped lang="scss">
13
</style>

src下创建views文件夹，再创建Home.vue

安装stylus或者安装sass

应用更新#

electron 应用更新-基于github

生成github token： https://github.com/settings/tokens/new

修改配置文件package.json

主要是build和release命令

1
{
2
  "name": "electron_test",
3
  "version": "1.0.7",
4
  "main": "main.js",
5
  "scripts": {
6
    "start": "nodemon --exec electron .",
7
    "build": "electron-builder",
8
    "release": "electron-builder  --win -p always"
9
  },
10
  "build": {
11
    "appId": "com.zzyang.video",
12
    "publish": {
13
      "provider": "github",
14
      "token": "你的token",
15
      "owner": "zxyang3636",
16
      "private": true,
17
      "releaseType": "release",
18
      "repo": "electron_test"
19
    },
20
    "win": {
21
      "icon": "./logo.png",
22
      "target": [
23
        {
24
          "target": "nsis",
25
          "arch": [
26
            "x64"
27
          ]
28
        }
29
      ]
30
    },
31
    "nsis": {
32
      "oneClick": false,
33
      "perMachine": true,
34
      "allowToChangeInstallationDirectory": true
35
    }
36
  },
37
  "author": "zzy",
38
  "license": "ISC",
39
  "description": "this is a electron demo",
40
  "devDependencies": {
41
    "electron": "^38.1.0",
42
    "electron-builder": "^26.0.12",
43
    "nodemon": "^3.1.10"
44
  },
45
  "dependencies": {
46
    "electron-log": "^5.4.3",
47
    "electron-updater": "^6.6.2"
48
  }
49
}

releaseType: // “draft” | “prerelease” | “release” | “undefined” 默认草稿状态

repo 你的仓库名称

参考：github

什么是 Electron#

常见的桌面GUI#

Electron 流程模型#

搭建工程#

完善窗口行为#

配置⾃动重启#

主进程与渲染进程#

Preload 脚本#

进程通信（IPC）#

渲染进程->主进程(单项)#

渲染进程<=>主进程（双向）#

打包应用#

electron-vite#

项目实战#

初始化项目#

应用更新#

评论区