This is the 26th day of my participation in the August Text Challenge.More challenges in August

Electron

sequence

For Electron, I had no idea of such a framework until I looked at VS Code’s history.

Let’s start with Vs Code, which is known to be a very handy editor (especially for front-end developers). At first I saw the full name of Vs Code — Visual Studio Code — and thought it was an editor written in a backend language like Vs. I was surprised to learn that developers were writing in TypeScript.

Visual Studio Code based on Electron development. Electron is a Chromium-based project that can be used to develop native Node.js based applications.

So AT that time, I saved the Electron official website for the next time, so I haven’t learned it until now

Official website: www.electronjs.org/


Introduction to the

Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. Embedding Chromium and Node.js into binary Electron allows you to keep a code base of JavaScript code and create cross-platform applications for macOS and Linux running on Windows — no local development experience is required.

Think of it as a variant of Node.js that focuses on desktop applications, rather than a Web server.

Electron uses web pages as its GUI, so you can think of it as a lite version of Chromium browser controlled by JavaScript.

In normal browsers, web pages typically run in a sandbox environment and do not allow access to native resources. However, the Electron user has the ability to call the Node.js APIs in a web page and can interact directly with the underlying operating system.

The premise condition

As mentioned earlier, Electron is based on Node.js, so you need to install Node.js first

Node installation here will not say much, we understand all understand, doggerhead. JPG

Run the node -v command to view the version

Initialize a project using YARN Init

The initial structure of the project:

Note: If the main field is not declared in package.json, Electron will preferentially load index.js

Next, install Electron. The command is CNPM install Electron -s -d

The reason yarn is not applicable here is simple: YARN cannot install Electron. So I still use CNPM here (there may be other solutions to solve the problem about YARN download Electron, but there are some problems)

Json dependencies appear in package.json:

"dependencies": {
    "electron": "^ 13.2.2." "
  }
Copy the code

Json script and run NPM run start to start:

"scripts": {
    "start": "electron ."
  }
Copy the code


Configuration practice

The entry point for any Electron application is the main file. This file controls the main process, which runs in a full Node.js environment and is responsible for controlling the life cycle of your application, displaying the native interface, performing special operations, and managing the renderer process (more on that later).

During execution, Electron will look for the file based on the value configured in the main field under the package.json configuration in the application.

To initialize the main file, create an empty file named main.js in the root directory of your project

At this point you can add the following code to main.js:

Import the electron module using require and create the appropriate window application using BrowserWindow

In mainWindow.loadURL you can select the Html page to load, in this case the index. Html page

Now that you have a page, load it into the application window. To do this, the following two Electron modules are important:

  • appModule, which controls the event lifecycle of the application.
  • BrowserWindowModule that creates and manages application Windows.

The main. Js code:

const electron = require('electron');
// The module that controls the application lifecycle.
const {app} = electron;
// Create a native browser window module.
const {BrowserWindow} = electron;
// Keep a global reference to the window object, if you don't,
// When the JavaScript object is garbage collected, the window is automatically closed
let mainWindow;
function createWindow() {
  // Create a browser window.
  mainWindow = new BrowserWindow({width: 800.height: 600});
  // Load the app's index.html.
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  // Enable development tools.
  mainWindow.webContents.openDevTools();
}
// Electron will be initialized and ready
app.on('ready', createWindow);
Exit when all Windows are closed.
app.on('window-all-closed'.() = > {
  // Otherwise, most apps and their menu bar remain active.
  if(process.platform ! = ='darwin') { app.quit(); }}); app.on('activate'.() = > {
  // Most applications will create a new window.
  if (mainWindow === null) { createWindow(); }});Copy the code

You can write anything in index.html to test

<! DOCTYPE html><html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello world</h1>
  </body>
</html>
Copy the code

Operation effect :(closing the window will automatically exit the operation)