Electron is introduced

Simply put, Electron is a library that lets you write desktop applications running on Windows, macOS, and Linux using Javascript, HTML, and CSS.

Case pictures

Development Environment Installation

  • Install Node.js click here to enter the official website to download and install.

  • Verify the Node installation

    node -v

  • Install CNPM

    For well-known reasons (slow domestic connection to foreign network), you need a CNPM instead of NPM, here it iswebsite.

    Install commands (open cmd.exe on your system to execute commands) :

    npm install -g cnpm –registry=https://registry.npm.taobao.org

  • Install the Electron

    cnpm install -g electron

  • Install the Electron – forge

    This is the Electron tool integration project similar to the Dumb dev kit. For details, click here. cnpm install -g electron-forge ==================================================

There are two ways to create a project

– Method 1: Use example codes

1, download the example code from the lot: git clone https://github.com/electron/electron-quick-startCopy the code

2. Run the CD electron-quick-start directoryCopy the code



Directory structure:

3, The installation project depends on NPM installCopy the code



4. Launch Project:

npm start



5. If the following interface is displayed, the project is running successfully



Method 2. Use electron Forge

1. Create a project

 $electron-forge init  myproject 
Copy the code

2. Go to the directory and run

$cd myproject
$electron-forge start
Copy the code

WEB URL changed to desktop EXE

The project structure



Creating a window object

Let mainWindow function createWindow () {mainWindow = new BrowserWindow({various attributes, various methods});Copy the code

Windows fixed width and height

 mainWindow = new BrowserWindow({
    width: 400,
    height: 300, 
	});
Copy the code

The window is displayed in full screen

MainWindow = new BrowserWindow({//fullscreen //fullscreen: true,});Copy the code

Window maximization

MainWindow = new BrowserWindow({// do not show //show: false,}); The default is not to display, then maximize the window, and finally display mainwindow.maximize () mainwindow.show ()Copy the code

Exe icon

MainWindow = new BrowserWindow({// icon icon: './logo.jpg',});Copy the code

Load the url in javascript executable

mainWindow = new BrowserWindow({ webPreferences: { //nodeIntegration: True [default] // When loading remote content, whether using BrowserWindow, BrowserView or < webView >, the first task is to disable node.js integration: false, nodeIntegrationInWorker: false } })Copy the code

Load the remote URL

let url="http://www.baidu.com"
mainWindow.loadURL(url);
Copy the code

Hide the menu for the Electron window

mainWindow.setMenu(null);
Copy the code