[Day 6] 終於要開始寫 Code 了

2025 iThome 鐵人賽

DAY 7

Software Development

試著開發一些有用的工具程式系列第 7 篇

17th鐵人賽

dash2100

團隊Shell 出來面對

2025-09-21 23:36:27

17 瀏覽

分享至

技術選型搞定後，今天要來建立第一個 Electron 專案
不過 Electron 本質上就是把網頁包成桌面程式，對我這個網頁仔來說應該還好(?

建立專案

先從最基本的開始：

npm init -y
npm install --save-dev electron

設定 package.json，加入啟動腳本：

{
  "name": "android-app-uninstaller",
  "version": "1.0.0",
  "description": "App Management Tool For Android",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "dev": "electron . --enable-logging",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "electron": "^38.1.2"
  }
}

建立 main.js

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

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

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

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

開始寫網頁

寫了最簡單的 Hello World 介面，就是一個視窗加上幾個按鈕和文字：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Hello World - Electron</title>
</head>

<body>
    <h1>Hello World!</h1>
    <h1>你好，你好，你好你好你好</h1>
</body>

</html>