前兩天我們做了一個網頁伺服器，接下來我們來幫它加上 GUI 吧！
Electron 是一個用前端技術寫桌面應用程式的東西，它基本上跟 pkg 很像，都是把 Node.js 包進去，但 Electron 還多包了一個 Chormium (就是之前說的那個憂鬱 Chrome)。
但它的 Node.js 及 Chromium 也不是一般的，而是有稍稍修改過。
Electron 的結構很簡單：
我們先來把最簡單的 Electron 弄好。
先一樣初始化一個專案。
npm i -D electron
"main": "main.js",
"scripts": {
"start": "electron ."
},
把主程式叫做 main.js。
設定 npm start 時執行 electron .。
主程式就是你的程式開始執行的地方。
const { app, BrowserWindow } = require("electron");
const path = require("path");
app.whenReady().then(() => {
createWindow();
// MacOS 在關掉程式視窗後還是會在背景執行，所以在這種狀況下我們也要再建立新的視窗
app.on("activate", () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
app.on("window-all-closed", () => {
// darwin 就是 MacOS，例外是因為它背景執行的特性，不需要直接退出
if (process.platform !== "darwin") app.quit();
});
function createWindow() {
// 建立新視窗
const win = new BrowserWindow({
width: 1000,
height: 800,
// agent.js 是一個類似 Extension 的檔案，它可以存取頁面以及 Node.js 的東西
webPreferences: { preload: path.join(__dirname, "agent.js") },
});
// 在視窗中載入 app.html
win.loadFile("app.html");
}
程式 ready 之後我們就召喚第一個視窗，然後在其中載入 app.html，且用 agent.js 作聯絡。
<html>
<head>
<meta charset="UTF-8" />
<link href="./style.css" rel="stylesheet" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
<title>Hello, World!</title>
</head>
<body>
<h1>Hello, World!</h1>
<script src="./app.js"></script>
</body>
</html>
body {
background-color: wheat;
}
不是 JavaScript 沒什麼好說的。
這個執行緒既可以存取頁面，也可以存取一些 Node.js 的東西。
document.addEventListener("DOMContentLoaded", () => {
document.body.innerHTML += `<div id="app">Hello from agent.js!</div>`;
});
這個 JavaScript 就像一般網頁的一樣，只能存取頁面的東西。
document.body.innerHTML += `<div id="app">Hello from app.js!</div>`;
npm start
耶！
以 10/09 20:00 ~ 10/10 20:00 文章觀看數增加值排名
+357 LeetCode 雙刀流：62. Unique Paths
+135 【Day 26】 實作 - 於 AWS QuickSight 建立 Parameters 以及 Filter 設定
+128 D26 - 「來互相傷害啊！」：站在巨人的肩膀上
+122 Proxmox VE 備份整合方案應用：Proxmox BS
+110 [Python 爬蟲這樣學，一定是大拇指拉！] DAY25 - 實戰演練：多執行緒 (1)
+109 [Python] CNN
+107 Day25-介接 API（三）Google Calendar（III）OAuth 憑證建立與用 Google Calendar API 建立 Google Meet 會議
+107 DAY 25 Full Screen Modal - Follow Us
+106 DAY28: 光速了解與操作NVM
+106 Re: 新手讓網頁 act 起來: Day25 - useMemo 和 useCallback
iThome鐵人賽
看影片追技術