跳至主要內容

建立 Electron 應用程式

· 1 分鐘閱讀
ひかり

建立工作目錄​

mkdir test-electron-app
cd test-electron-app

建立 package.json​

npm init -y

安裝 electron​

npm i --save-dev electron

建立 index.js​

const { app, BrowserWindow } = require("electron")
const path = require("path")

function createWindow() {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, "preload.js")
        }
    })

    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()
    }
})

建立 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.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
</body>
</html>

修改 package.json

修改 scripts 部分。

"scripts": {
    "start": "electron ."
}

執行應用程式

npm start

コメント

読み込み中...

コメントを投稿する

★★★★★