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 應用程式。