一、安装 Electron

在开始学习 Electron 之前，我们需要安装 Electron。以下是安装步骤：

// 安装 electron
npm install electron -g

// 初始化新的项目
mkdir my-electron-app
cd my-electron-app
npm init


"main": "main.js",
"scripts": {
  "start": "electron ."
}

// 安装 electron
npm install electron --save-dev


touch main.js

二、创建 Electron 应用程序窗口

现在我们已经安装了 Electron，让我们创建一个新的窗口来运行我们的 Electron 应用程序。

// 导入 electron 模块
const { app, BrowserWindow } = require('electron')

// 创建新窗口
function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })

    // 加载 index.html 文件
    win.loadFile('index.html')
}

app.whenReady().then(() => {
    createWindow()

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

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

三、创建 Electron 应用程序主界面

让我们添加一些 HTML 和 JavaScript 来创建应用程序的主界面。

    
   
    


    
Hello World!

    <script>
        const { ipcRenderer } = require('electron')

        document.addEventListener('DOMContentLoaded', () => {
            ipcRenderer.on('message', (event, args) => {
                document.querySelector('#message').innerText = args
            })
        })
    </script>