Gauss Zhou

# Electron

# Electron 是什么？

Electron 是一个框架，可以让您使用 JavaScript, HTML 和 CSS 创建桌面应用程序。 然后这些应用程序可以打包在 macOS、Windows 和 Linux 上直接运行，或者通过 Mac App Store 或微软商店分发。

# Electron 快速入门

# 创建基本应用程序

# 安装 Electron

Electron 项目结构

my-electron-app/
├── package.json
├── main.js
└── index.html

npm install electron
npm install electron -g

# 创建主脚本文件

主脚本指定了您将运行主进程的 Electron 应用程序的入口点(就我们而言， main.js 文件)。 通常，在主进程中运行的脚本控制应用程序的生命周期，并显示图形用户界面及其元素。 执行本机操作系统交互，并在网页中创建渲染程序。 Electron 应用程序只能有一个主流程。

// 导入 app 和 BrowserWindow模块
// 用于管理应用程序的生命周期事件以及创建和控制浏览器窗口
const { app, BrowserWindow } = require("electron");
// 初始化新建窗口
// 并设置nodeIntegration为true
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  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();
  }
});

# 创建网页

<!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
      <script>
        document.write(process.versions.node);
      </script>
      , Chrome
      <script>
        document.write(process.versions.chrome);
      </script>
      , and Electron
      <script>
        document.write(process.versions.electron);
      </script>
      .
    </p>
  </body>
</html>

# 修改包管理文件

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

# 运行应用程序

npm start

# 打包应用程序

# 导入 Electron Forge 到您的应用文件夹
npx @electron-forge/cli import
# 创建一个分发版本
npm run make
# Electron-forge 会创建 out 文件夹

# 学习基础知识

# 应用程序结构

  • Chromium 用于显示网页内容
  • Node.js 用于文件和操作系统
  • 自定义 APIs 用于本机函数

# 主进程和渲染进程

  • 主进程通过创建 BorwserWindow 实例来创建网页，每一个 BrowserWindow 实例在其渲染过程中运行网页，当 BorwserWinodw 实例被销毁时，其对应的渲染进程也会被终止。
  • 主进程管理所有网页和其相对于的渲染进程
  • 渲染进程值管理相应的网页
  • 渲染进程通过 IPC 与主进程通信

# ElectronAPI

某些模块可以在主进程中使用，有些两者皆可，注意查看 API 文档

比如BrowserWindow类，只能在主进程中使用

# Node.js API

注意：要从渲染进程中访问 Node.js API，需要设置nodeIntegration选项为true。

const fs = require("fs");
const root = fs.readdirSync("/");
console.log(root);

如果进一步使用 Node.js 的第三方模块，需要安装aws-sdk

npm i aws-sdk

cosnt S3 = require('aws-sdk/clients/s3')

# 添加功能

# 通知

对于渲染进程，Electron 允许使用HTML 通知 API (opens new window)发送通知，然后使用当前运行中的系统的原生通知 API 来进行显示。

在主进程中显示通知，需要使用Notification模块

<script src="renderer.js"></script>

const myNotification = new Notification("Title", {
  body: "Notification from the Renderer process"
});

myNotification.onclick = () => {
  console.log("Notification clicked");
};

# Notification 模块

构造函数 new Notification([options])

options
title String 通知的标题
subtitle String(可选)
body String 通知的正文文本
silent Boolean
icon String|Image 通知显示的图标
hasReply Boolean
timeoutType
replyPlaceholder String(可选)
sound String(可选)
urgency String(Linux)
actions
closeButtonText String(macOS)

静态方法 Notifiction.isSupported() 返回一个布尔值，表示当前系统是否支持桌面通知

实例事件
show
click
close
reply(macOS)
action(macOS)
实例方法
show() 展示
close() 忽略

# 最近文档

# 引用程序进程

# 自定义 Dock 菜单

# 自定义 Window 任务栏

# 自定义 Linux 桌面动作

# 键盘快捷键

# 离线/在线侦测

# 原生文件拖放

# 离屏渲染

# 暗黑模式

# 嵌入网页

Electron 是什么？
Electron 快速入门
创建基本应用程序
学习基础知识
添加功能