前言：参考Electron 中文网。
核心知识点：有哪些进程，进程之间的通信，electron API 分类及怎么调用。
一、快速开始
1. 新建一个 my-electron 的文件夹。
2. 运行 npm init 创建 package.json 文件。
3. 填写 author 和 description 字段，应用打包必须。
4. 运行 npm install --save-dev electron，安装依赖。
安装报错时，可参考安装 electron 报错解决
5. 安装 Electron Forge 依赖，并使用其 import 命令来设置 Forge 的脚手架，用来打包应用。
npm install --save-dev @electron-forge/cli
npx electron-forge import6. 修改 package.json 的 scripts 对象
使用 nodemon 启动命令，可以动态更新 main.js 的修改，不用重复启服务。
{
"name": "electron-demo",
"version": "1.0.0",
"description": "this is a demo",
"main": "main.js",
"scripts": {
"start": "nodemon --watch main.js --exec npm run build",
"build": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish"
},
"keywords": [],
"author": "yqcoder",
"license": "ISC",
"devDependencies": {
"@electron-forge/cli": "^7.4.0",
"@electron-forge/maker-deb": "^7.4.0",
"@electron-forge/maker-rpm": "^7.4.0",
"@electron-forge/maker-squirrel": "^7.4.0",
"@electron-forge/maker-zip": "^7.4.0",
"@electron-forge/plugin-auto-unpack-natives": "^7.4.0",
"@electron-forge/plugin-fuses": "^7.4.0",
"@electron/fuses": "^1.8.0",
"electron": "^31.3.1"
},
"dependencies": {
"electron-squirrel-startup": "^1.0.1"
}
}7. 根目录创建 main.js 文件
const { app, BrowserWindow } = require("electron");
const path = require("node:path");
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, "preload.js"),
},
});
mainWindow.loadFile("index.html");
};
app.whenReady().then(() => {
createWindow();
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
app.on("window-all-closed", () => {
if (process.platform !== "darwin") app.quit();
});8. 根目录创建 index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- https://web.nodejs.cn/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>, Chromium
<span id="chrome-version"></span>, and Electron
<span id="electron-version"></span>.
<script src="./renderer.js"></script>
</body>
</html>9. 根目录创建 preload.js 文件
window.addEventListener("DOMContentLoaded", () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector);
if (element) element.innerText = text;
};
for (const dependency of ["chrome", "node", "electron"]) {
replaceText(`${dependency}-version`, process.versions[dependency]);
}
});10. 运行项目
npm run start
11. 项目打包
npm run make
二、页面
BrowserWindow API 用于创建和管理应用窗口
1. 页面载入
每个窗口内容都是一个页面，页面可以是本地 HTML 或远程网址。
1.1 创建页面
在根目录中创建 index.html 网页：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<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>
标签：内置,const,app,网速,js,electron,实例
From： https://blog.csdn.net/weixin_64684095/article/details/140920202