Electron MOOC Notes

The main process

Rendering process

Process of communication

Project – Local player

The Electron Geek Time Notes

Relationship between the main process and the renderer

Electron architecture

The main process

Rendering process

The API module

App: It manages the life cycle of our app, such as exiting. It can also set some properties of the app itself, such as the Dock.

BrowerWindow: is used to manage our window.

IpcMain: It communicates IPC with the ipcRenderer

Menu/Tray: These are our native GUIs including MenuItem and so on

Notification: Allows us to make an interactive Notification

WebContents: is used to load our specific pages

AutoUpdater: This is our update module

GlobalShortcut: A shortcut used to set global

Clipboard: It is used to access and it is used to read and write our clipboard

CrashReporter: this is used to monitor whether our main and renderer processes have crashed

Remote: You can call our main process module. Do not use it

DesktopCapture: is used to capture our desktop streams, through this module we can get system screenshots, a video stream of the screen, etc

The purpose of Electron interprocess communication

Notification event: For example, we want to create a native menu in the page, but only the main process can create the native menu, so only through IPC inter-process communication, to let the main process create our menu

Data transfer: For example, IF I want to get the current memory status of a page, I need to transfer the data through IPC

Sharing data: for example, our user data, which will be used in various processes, requires IPC communication to complete data sharing

IPC module communication

Interprocess communication: from the renderer to the main process

Interprocess communication: from the main process to the renderer

Page to page (renderer to renderer) communication

Experience and Skills

We need to set a time limit when responding. When the application times out, we need to directly respond to an abnormal timeout event for business to process, and then do the corresponding interaction.

Electron applies native capabilities

Create the native GUI using the Electron API

Use the Electron API to obtain the underlying capabilities

Use Node.js for low-level capabilities

Invoke native modules using Node.js

OS calling capability

The ability of Electron

Front-end imagination

Electron netease Cloud class notes

The first Electron application

Respond to events

Activate works only on Mac systems

Electron characteristics

Displays the developer tools window

Window size and position

Full screen window

Bezel-free and transparent Windows

Window lock mode

Set window icon

Load pages gracefully

Father and son window

The modal window

Close multiple Windows with code

Interaction between Windows

File display window (Mac only)

Open the dialog box (1) Basics

Open the dialog box. (2) Customize the dialog box

Open the dialog box (3) to select a file of the specified type

Open the dialog box (4) to select and create a directory

Open the dialog box (5) to select multiple files and directories

Open the dialog box (6) to return the selection result through the callback function

Save dialog box

Message dialog box (1) Basics

Message dialog box (2) Customize the icon of the message dialog box

Message dialog box (3) Set the type of message dialog box

Message dialog box (4) Add multiple buttons to the message dialog box

Error dialog

Create child Windows with the window.open method

Control window and display print dialog box

Use the postMessage method to pass data

Returns data from the window

The page source

Use the eval method to pass data to child Windows

Embed other pages in the window

Render pages using a webFrame

Gets the absolute coordinates of the screen size and mouse

Add a progress bar to the Windows taskbar

Create an application menu using a template

Roles in the menu

Menu types

Add ICONS for menu items

Dynamic Menu Creation

Context menu

Add tray ICONS and context menus for your application

Add multiple tray ICONS

The tray event

The tray method

Add bubble messages for Windows tray ICONS

Drag and display images

Drag and drop to display images of different sizes

Taking pictures

Customize styles based on the current operating system type

Data storage: read and write key-value data with localStorage

Data storage: Use JavaScript engine to manipulate SQLite database

Data storage: Compile the SQlite3 module in Electron

The basic usage of electron packager

How do YOU deal with resources in your application

Package any project directory

Modify the executable file name

Modify the application name

Modify the application icon

Package for multiple platforms simultaneously

Generate asar package

Embed meta information in an EXE file (Windows only)

Use the electron packager base tool

Realize the visual packaging tool based on electron- Packager