1. StackOverflow 文档
  2. electron 教程
  3. 电子入门
  4. Hello World

Hello World

Created: November-22, 2018

建立

电子项目结构通常如下所示：

hello-world-app/
├── package.json
├── index.js
└── index.html

现在让我们创建文件并初始化我们的 package.json。

$ mkdir hello-world-app && cd hello-world-app
$ touch index.js
$ touch index.html
$ npm init

注意： 如果 package.json 中未指定 main 参数，Electron 将使用 index.js 作为默认入口点。

主要过程

在 Electron 中，运行 package.json 主脚本的过程称为主过程。在这里，我们可以通过创建 BrowserWindow 实例来显示 GUI。

将以下内容添加到 index.js：

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

// Global reference to the window object
let win

// This method will be called when Electron has finished
// initialization and is ready to create browser windows
app.on('ready', function(){
    // Create the window
    win = new BrowserWindow({width: 800, height: 600})

    // Open and load index.html to the window
    win.loadURL('file://' + __dirname + '/index.html')

    // Emitted when the window is closed.
    win.on('closed', () => {
        // Dereference the window object
        win = null
    });
})

// Quit the app if all windows are closed
app.on('window-all-closed', () => {
    app.quit()
})

HTML 模板和渲染器流程

接下来，我们为应用程序创建 GUI。Electron 使用网页作为 GUI，每个网页都在自己的进程中运行，称为渲染器进程。

将以下代码添加到 index.html：

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

运行应用程序

有多种方法可以运行 Electron App。

全局安装了 electron-prebuilt

首先，确保安装了 electron-prebuilt 。

现在我们可以使用以下命令测试应用程序：

$ electron .

方法 2 - 没有全局安装 electron-prebuilt

首先，我们必须输入你的应用程序的文件夹（package.json 所在的文件夹）。

在那里，打开一个终端/命令提示符窗口并键入 npm install 以将必要的安装到该应用程序的文件夹中。

之后，键入 npm start 来运行应用程序。请记住，你的 package.json 仍然需要指定一个’开始’脚本。

如果一切正常，你应该看到这样的事情：

StackOverflow 文档

恭喜！ 你已成功创建了第一个 Electron 应用程序。