iT邦幫忙

2021 iThome 鐵人賽

DAY 26
1
Modern Web

JavaScript Easy Go!系列 第 26

#26 初探 Electron

前兩天我們做了一個網頁伺服器,接下來我們來幫它加上 GUI 吧!

Electron

Electron 是一個用前端技術寫桌面應用程式的東西,它基本上跟 pkg 很像,都是把 Node.js 包進去,但 Electron 還多包了一個 Chormium (就是之前說的那個憂鬱 Chrome)。
但它的 Node.js 及 Chromium 也不是一般的,而是有稍稍修改過。

Electron 的結構很簡單:

  • 有一個主程式 (main.js)
  • 主程式可以召喚很多視窗
  • 每個視窗可以當成一個網頁,有 HTML CSS JS 以及一個聯絡主程式的幫手 (agent.js)

直接開始吧

我們先來把最簡單的 Electron 弄好。
先一樣初始化一個專案。

安裝 Electron

npm i -D electron

修改 package.json

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

把主程式叫做 main.js。
設定 npm start 時執行 electron .

主程式 main.js

主程式就是你的程式開始執行的地方。

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 作聯絡。

app.html & style.css

<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 沒什麼好說的。

agent.js

這個執行緒既可以存取頁面,也可以存取一些 Node.js 的東西。

document.addEventListener("DOMContentLoaded", () => {
    document.body.innerHTML += `<div id="app">Hello from agent.js!</div>`;
});

app.js

這個 JavaScript 就像一般網頁的一樣,只能存取頁面的東西。

document.body.innerHTML += `<div id="app">Hello from app.js!</div>`;

執行試試看

npm start

耶!


每日鐵人賽熱門 Top 10 (1009)

以 10/09 20:00 ~ 10/10 20:00 文章觀看數增加值排名

  1. +357 LeetCode 雙刀流:62. Unique Paths
    • 作者: WeiYuan
    • 系列:LeetCode 雙刀流:Python x JavaScript
  2. +135 【Day 26】 實作 - 於 AWS QuickSight 建立 Parameters 以及 Filter 設定
    • 作者: kuramawife
    • 系列:Data on AWS - 實作建立 Data Analytics Pipeline
  3. +128 D26 - 「來互相傷害啊!」:站在巨人的肩膀上
    • 作者: 鱈魚
    • 系列:你渴望連結嗎?將 Web 與硬體連上線吧!
  4. +122 Proxmox VE 備份整合方案應用:Proxmox BS
    • 作者: Jason Cheng (節省哥)
    • 系列:突破困境:企業開源虛擬化管理平台
  5. +110 [Python 爬蟲這樣學,一定是大拇指拉!] DAY25 - 實戰演練:多執行緒 (1)
    • 作者: GreedIsGood
    • 系列:Python 爬蟲這樣學,一定是大拇指拉!
  6. +109 [Python] CNN
    • 作者: nancysunnn
    • 系列:Python 機器學習實驗室 ʘ ͜ʖ ʘ
  7. +107 Day25-介接 API(三)Google Calendar(III)OAuth 憑證建立與用 Google Calendar API 建立 Google Meet 會議
    • 作者: Rui
    • 系列:Laravel 新手初見 API
  8. +107 DAY 25 Full Screen Modal - Follow Us
    • 作者: Tilda
    • 系列:SASS 基礎初學三十天
  9. +106 DAY28: 光速了解與操作NVM
    • 作者: 芝麻餅乾的餅乾
    • 系列:Node.js 非專業解說
  10. +106 Re: 新手讓網頁 act 起來: Day25 - useMemo 和 useCallback
    • 作者: Will
    • 系列:Re: 新手讓網頁 act 起來

上一篇
#25 Click! Serve! Plus
下一篇
#27 做點 GUI 吧!
系列文
JavaScript Easy Go!31

尚未有邦友留言

立即登入留言