当前位置：首页 > news >正文

不用vue,只用html,即可简单实现electron项目

news 2025/6/26 9:51:02

为你提供一个 最简单的 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 } = require('electron')
const path = require('path')let mainWindowfunction createWindow() {// 创建浏览器窗口mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js') // 安全通信脚本}})// 加载本地文件（生产环境）mainWindow.loadFile('index.html')// 开发时打开调试工具if (process.env.NODE_ENV === 'development') {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"}
}