Electron有属于自己的中文文档
Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron
但是在这篇文章中，我们不讲多余的原理，逻辑等官方话，只讲怎么快速构建一个Electron应用，并且在项目中怎么使用
一、准备环境
- 用户的电脑需要具备node开发环境，node的下载安装这里不再具体细讲
- 开发者需要具备基础的前端知识，JS，HTML，CSS，能看懂代码就行
- VS Code编辑器（其他的代码编辑器也可以）
二、初始化项目
2.1 创建一个文件夹 study-electron，作为项目根目录
2.2 进入该文件，右键选择“在终端中打开”
2.3 初始化npm
在终端中输入下面指令
npm init
在 entry point 时，要记得输入main.js
PS D:\study\study-electron> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help init` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (study-electron)
version: (1.0.0)
description:
entry point: (index.js) main.js
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\study\study-electron\package.json:
{
"name": "study-electron",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"description": ""
}
Is this OK? (yes) yes
PS D:\study\study-electron>
2.4 创建electron项目
在终端里面输入下面的指令
npm install electron --save-dev
2.5 用vs code打开项目
下面是整个项目的概览
2.6 新建一个 main.js
在根目录下面新建一个main.js文件
三、运行项目
3.1 在我们的package.json 里面，我们需要在scripts里面添加一行代码
{
"name": "study-electron",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron .",
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"electron": "^37.4.0"
}
}
3.2 然后打开vs code的终端
在终端里面输入
npm run start
最终会显示下面的结果，此时我们的electron应用已经启动成功
但是会有同学疑问，为什么没有桌面应用，那先别急，看后面内容
四、构建应用
4.1 在根目录中，创建一个index.html文件
内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<meta
http-equiv="X-Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<title>Hello from Electron renderer!</title>
</head>
<body>
<h1>Hello from Electron renderer!</h1>
<p>👋</p>
</body>
</html>
4.2 然后回到我们的main.js文件里面
清空掉我们的原有内容，复制粘贴下面的内容
const { app, BrowserWindow } = require("electron/main");
// 创建一个浏览器窗口
const createWindow = () => {
/**
* BrowserWindow 这个模块创建和管理 app 的窗口。
* width: 新窗口的宽度
* height: 新窗口的高度
*/
const win = new BrowserWindow({
width: 800,
height: 600,
});
// 加载应用的 index.html
win.loadFile("index.html");
};
// 当 Electron 完成初始化并且准备创建浏览器窗口时，将触发 ready 事件。
app.whenReady().then(() => {
//调用 createWindow() 创建窗口
createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
});
// 监听 window-all-closed 事件，当所有窗口都关闭时退出应用
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
4.3 开启项目
我们在终端里面再次执行下面指令
npm run start
最终会弹出来一个这样的窗口
这个窗口就是我们的electron应用
五、总结
通过上面的一同操作，我们发现创建一个 Electron应用还是比较繁琐的，其实在后面的主进程渲染进程之间的通信，会更加繁琐，也更加难以维护
实际在工作中，我们也不会通过这种方式去创建Electron应用
在前端开发中，我们都知道webpack和vite打包工具，以及vue、react开发框架
所以我们在实际开发中，Electron也要结合其他的工具和框架进行更高效的开发，在下一章节中，我将重点介绍 Electron-Vite
