electron入门，Hello World

最新推荐文章于 2024-11-07 14:08:55 发布

原创最新推荐文章于 2024-11-07 14:08:55 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#electron

本文详细介绍了如何一步步使用Node.js的Electron框架创建一个简单的桌面应用程序。首先，你需要安装Node.js，然后创建一个名为'electron'的项目，并初始化。接着，创建main.js作为应用的主进程文件，定义窗口大小并加载index.html。index.html包含基本的HTML结构，显示'Hello World!'。最后，更新package.json文件并运行应用。启动应用后，将在桌面上看到一个显示'Hello World!'的窗口，同时展示所使用的Node.js、Chrome和Electron的版本信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 安装node.js

2. 创建文件夹electron并初始化

mkdir electron && cd electron
npm init -y
npm i --save-dev electron

3. 创建main.js文件

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

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

4.创建index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
    <p>
        We are using node <script>document.write(process.versions.node)</script>,
        Chrome <script>document.write(process.versions.chrome)</script>,
        and Electron <script>document.write(process.versions.electron)</script>.
    </p>
</body>
</html>

5.修改 package.json

{
    "name": "electron",
    "version": "0.1.0",
    "author": "your name",
    "description": "My Electron app",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

6.运行