# 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桌面动作

# 键盘快捷键

# 离线/在线侦测

# 原生文件拖放

# 离屏渲染

# 暗黑模式

# 嵌入网页