第一个electron程序

（1）初始化项目

执行 npm init -y 进行项目初始化

1npm init

（2）安装 electron 作为开发依赖

1npm install electron -D

（3）填写好 package.json 中的必要信息及启动命令

为了后续能顺利打包,author 和 description 必填。

1{
2  "name": "learn_electron",
3  "version": "1.0.0",
4  "main": "main.js",
5  "scripts": {
6    "start": "electron ."
7  },
8  "keywords": [],
9  "author": "dancy",
10  "license": "ISC",
11  "description": "this is a electron demo",
12  "devDependencies": {
13    "electron": "^33.2.0"
14  }
15}

（4）新增页面文件

在项目根目录下创建 index.html 文件

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8">
5    <meta httpEquiv="Content-Security-Policy" content="default-src: 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"/>
6    <title>Hello Electron!</title>
7  </head>
8  <body>
9    <h1>这是一个electron应用!</h1>
10  </body>
11</html>

（5）配置入口文件

在项目根目录下创建 main.js 文件,main.js 运行在应用的主进程上,无法访问 Web 相关API,主要负责：控制生命周期、显示界面、控制渲染进程等其他操作。

1const { app, BrowserWindow } = require("electron")
2
3// 创建一个新的浏览器窗口
4const createWindow = () => {
5	// 创建了一个新的 BrowserWindow 实例,并设置了窗口的宽度和高度。
6	const win = new BrowserWindow({
7		width: 800,
8		height: 600,
9	})
10
11	// 加载指定的文件到新创建的窗口中,这个文件通常是应用的主页面。
12	win.loadFile("index.html")
13}
14
15// 当主进程准备就绪时创建窗口
16app.on("ready", () => {
17	createWindow()
18
19	// 当应用的窗口被激活时,会触发 activate 事件。
20	app.on("activate", () => {
21		// 如果没有其他窗口打开,则重新创建一个窗口。
22		if (BrowserWindow.getAllWindows().length === 0) createWindow()
23	})
24})
25
26// 当所有窗口都被关闭时
27app.on("window-all-closed", () => {
28	// 如果当前运行的平台不是 macOS,则调用 app.quit() 方法来退出应用。
29	// 在 macOS 平台上,即使所有窗口都被关闭,应用也不会退出,而是保持在后台运行
30	// 这是因为 macOS 用户通常期望应用在关闭所有窗口后仍能保持运行状态,以便随时重新打开窗口。
31	// 而在其他平台上,如 Windows 和 Linux,通常会在所有窗口关闭后退出应用。
32	if (process.platform !== "darwin") app.quit()
33})

（6）启动应用查看效果

1npm run start

第一个electron程序#

第一个electron程序