如何创建点击按钮后在控制台输出Hello World的ElectronJS应用

一、环境准备 #

1. 确保已安装Node.js（建议16.x及以上版本，兼容Electron稳定版）
2. 初始化项目：在空文件夹打开终端，执行

npm init -y

3. 安装Electron依赖：

npm install electron --save-dev

4. 修改package.json的scripts字段，添加启动命令：

"scripts": {
  "start": "electron ."
}

二、项目文件结构 #

your-project-folder/
├── index.html
├── renderer.js
├── index.js
└── package.json

三、代码实现 #

1. index.html（渲染进程页面） #

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
  </head>
  <body>
    <button id="hello-button">Hello World</button>
    <script src="renderer.js"></script>
  </body>
</html>

2. renderer.js（渲染进程脚本） #

const helloButton = document.getElementById('hello-button');
helloButton.addEventListener('click', () => {
  console.log('Hello World!');
});

3. index.js（主进程脚本） #

const { app, BrowserWindow } = require('electron');

let win;

function createWindow() {
  // 创建自定义尺寸的浏览器窗口
  win = new BrowserWindow({ width: 800, height: 600 });
  // 加载本地HTML文件
  win.loadFile('index.html');

  // 可选：默认打开开发者工具，方便调试
  // win.webContents.openDevTools();
}

// Electron初始化完成后创建窗口
app.on('ready', createWindow);

// 跨平台兼容：所有窗口关闭时退出应用（MacOS除外）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// MacOS下Dock图标点击时重建窗口
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

四、运行应用 #

在终端执行：

npm start

点击窗口中的「Hello World」按钮，打开开发者工具（快捷键Ctrl+Shift+I，Mac为Cmd+Opt+I），切换到「Console」标签页即可看到输出的Hello World!。

五、常见问题排查（含常规/非常规场景） #

常规问题 #

• 按钮点击无反应：检查renderer.js是否正确引入，或DOM元素是否在脚本执行前已加载（本方案将脚本放在body末尾，已避免此问题；若需放在head中，需用DOMContentLoaded事件包裹代码）
• 控制台看不到输出：忘记打开开发者工具，或输出被过滤；可临时添加alert('Hello World!')验证点击逻辑是否生效
• 应用启动失败：检查package.json的main字段是否指向index.js，或Electron依赖是否安装完整

非常规问题 #

• 高版本Electron兼容性：Electron 12+默认开启contextIsolation，本方案仅操作DOM无需修改配置；若需在渲染进程使用Node API，需额外配置webPreferences
• 文件路径错误：若HTML文件不在根目录，loadFile需传入正确相对路径（如./src/index.html），Electron会自动处理跨平台路径分隔符差异
• 系统权限限制：部分Linux/Windows系统可能阻止Electron运行，需确保Node.js和Electron拥有执行权限，或尝试以管理员/root身份运行终端
• 代码修改后无生效：Electron默认无热重载，修改代码后需重启应用；可安装electron-reload插件实现开发时自动刷新

内容的提问来源于stack exchange，提问作者captainowl