为你提供一个 最简单的 Electron 项目模板,包含完整的代码、配置和打包说明。即使你是小白,也能快速上手。
1. 项目结构
/your-project├── main.js # Electron 主进程文件├── preload.js # 安全通信脚本(可选)├── index.html # 前端页面├── package.json # 项目配置└── build/ # 打包配置目录(后文会生成)
2. 初始化项目
在空文件夹中打开终端,执行:
npm init -y
npm install --save-dev electron electron-builder
3. 核心文件代码
(1) main.js
- 主进程
const { app, BrowserWindow, Menu, } = require('electron')
const path = require('path')let mainWindowfunction createWindow() {// 创建浏览器窗口mainWindow = new BrowserWindow({width: 2500,height: 1000,icon: path.join(__dirname, 'images/favicon.png'),webPreferences: {preload: path.join(__dirname, 'preload.js') // 安全通信脚本}})// 隐藏菜单栏Menu.setApplicationMenu(null);// 加载本地文件(生产环境)mainWindow.loadFile('index.html')// mainWindow.webContents.openDevTools()}// Electron 初始化完成时触发
app.whenReady().then(createWindow)// 关闭所有窗口时退出应用(macOS 除外)
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})// macOS 点击 Dock 图标重新打开窗口
app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
(2) preload.js
- 安全通信脚本
// 这里可以暴露安全的 API 给渲染进程
window.electronAPI = {doThing: () => require('electron').ipcRenderer.send('do-a-thing')
}
(3) index.html
- 前端页面
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我的 Electron 应用</title>
</head>
<body><h1>Hello Electron!</h1><button id="btn">点击测试</button><script>document.getElementById('btn').addEventListener('click', () => {// 调用预加载脚本暴露的方法window.electronAPI?.doThing()})</script>
</body>
</html>
4. 配置 package.json
{"name": "my-electron-app","version": "1.0.0","main": "main.js","scripts": {"start": "electron .","pack": "electron-builder --dir","dist": "electron-builder"},"build": {"appId": "com.example.myapp","productName": "我的应用","directories": {"output": "dist" // 打包输出目录},"win": {"target": "nsis", // Windows 安装包"icon": "build/icon.ico"},"mac": {"target": "dmg","icon": "build/icon.png"},"linux": {"target": "AppImage"}},"devDependencies": {"electron": "^28.0.0","electron-builder": "^24.0.0"}
}
5. 添加应用图标
在 build/
目录下放置:
-
icon.ico
(Windows) -
icon.png
(macOS/Linux)
推荐尺寸:至少 256x256 像素
6. 运行与打包命令
测试打包(不生成安装包)
npm run pack
生成安装包
npm run dist
打包结果会输出到 dist/
目录:
-
Windows:
.exe
安装包 -
macOS:
.dmg
镜像 -
Linux:
.AppImage
7. 注意事项
-
安全建议:
-
生产环境不要禁用
contextIsolation
-
所有 Node.js API 调用通过
preload.js
中转
-
-
调试技巧:
-
主进程调试:在 VSCode 中添加调试配置
-
渲染进程调试:右键页面选择 "Inspect Element"
-
-
跨平台问题:
-
Windows 打包需在 Windows 系统进行
-
macOS 打包需要证书签名
-