Electron 101

Hello World

初始化项目：

mkdir electron-101 && cd electron-101
npm init -y
wget -O .gitignore https://raw.githubusercontent.com/github/gitignore/refs/heads/main/Node.gitignore

配置项目：

npm install electron -D

package.json:

{
  "name": "electron-101",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jane Doe",
  "license": "MIT",
  "devDependencies": {
    "electron": "^23.1.3"
  }
}

编写代码：

main.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>

main.js:

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

// 用于创建窗口的函数
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

// 在 app 就绪时调用
app.whenReady().then(() => {
  // 创建窗口
  createWindow()

  // 监听 activate 事件（macOS 用户点击 app 图标）
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

// 监听 window-all-closed 事件（所有窗口被关闭）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

测试程序：
```
npm run start
```

使用 VS Code 调试

.vscode/launch.json:

{
  "version": "0.2.0",
  "compounds": [
    {
      "name": "Main + renderer",
      "configurations": ["Main", "Renderer"],
      "stopAll": true
    }
  ],
  "configurations": [
    {
      "name": "Renderer",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Main",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args": [".", "--remote-debugging-port=9222"],
      "outputCapture": "std",
      "console": "integratedTerminal"
    }
  ]
}

参考：创建您的第一个应用程序 | Electron

posted @ 2025-06-27 23:56 Undefined443 阅读(9) 评论(0) 收藏举报

刷新页面返回顶部

undefined443

Electron 101

Hello World

使用 VS Code 调试

公告