一、安裝 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>
原創文章，作者：RUCOT，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/351771.html