#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 起来

<<:  Day_28 Ad blocking

>>:  Day25. 发动魔法卡，融合 - Composite (下)

Day 29: eslint

eslint 是很有名的 linter ，如果有在写 JavaScript 应该多多少少都会知道，虽...

SystemC: 哈罗，暖个身吧

环境建立 先从这里下载 SystemC 2.3.3 到目标资料夹下(或者从这里下载其他版本) 记得准...

【Day 28】练习专案 1/2 - NFC、Barcode、fontFamily、Stack、sliding_up_panel

今日要点 》前言 》介绍 Demo 专案 》程序架构研究 前言 前面精选了很多在 Github 上很...

DAY14-React Overview

前言： 在经过两个礼拜的内容後，相信大家对写网页也有一定的基础了吧！这两个礼拜我们介绍很了多很好用...

新新新手阅读 Angular 文件 - Day04

学习目标 这篇内容是纪录阅读官方文件Display a selection list，文章主要内容是...