Electron Quick Start and Packaging

Posted by sgalonska on Mon, 10 Jun 2019 02:20:08 +0200

Preliminary understanding

brief introduction

Electron lets you use pure JavaScript to call rich native APIs to create desktop applications. You can think of it as a variant of io.js that focuses on desktop applications rather than web servers.
This does not mean that Electron is JavaScript bound to the GUI library. Instead, Electron uses web pages as its GUI, so you can think of it as a streamlined version of Chromium browser controlled by JavaScript.

Main process

In Electron, the process that runs the main script in package.json is called the main process. The script running in the main process can show the GUI in the form of creating web pages.

Rendering Progress

Because Electron uses Chromium to display pages, Chromium's multi-process structure is also fully utilized. Each Electron page is running its own process, which we call the rendering process.
In general browsers, web pages usually run in sandbox environment, and access to native resources is not allowed. However, Electron users have the ability to call io.js APIs in the web pages and can interact directly with the underlying operating system.

The difference between main process and rendering process

The main process uses the Browser Window instance to create a Web page. Each Browser Windows instance runs a Web page in its own rendering process. When a Browser Window instance is destroyed, the corresponding rendering process is terminated.
The main process manages all pages and their corresponding rendering processes. Each rendering process is independent of each other and only cares about their own pages.
Because managing native GUI resources in web pages is very dangerous and easy to leak resources, it is not allowed to call APIs related to GUI on Web pages. If you want to use GUI operation in a web page, the corresponding rendering process must communicate with the main process and request the main process to perform relevant GUI operation.
In Electron, we provide communication between the main process and the rendering process. ipc Module. There is also a remote process call style communication module. remote.

Creating Electron Applications

directory structure

app/
├── package.json     //Configuration declaration file
├── main.js          //Main process rendering file
├── renderer.js      //Rendering process files
└── index.html       //Main entry file

1.1 Create the app directory and create new index.html and main.js files in the directory (not considering renderer.js for the time being)

Example index.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <!-- All of the Node.js APIs are available in this renderer process. -->
    We are using Node.js <script>document.write(process.versions.node)</script>,
    Chromium <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>

  <script>
     //require('./renderer.js')
  </script>
</html>

Examples of main.js files:

// var app = require('app'); and // modules that control the application lifecycle.
// var BrowserWindow = require('browser-window'); // Module for creating native browser windows

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

// Keep a global reference to the window object, otherwise, when JavaScript is GC,
// Windows will be automatically shut down
var mainWindow = null;

// When all windows are closed, exit.
app.on('window-all-closed', function() {
  // On OS X, users typically press Cmd + Q before explicitly pressing it
  // Applications stay active
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// When Electron is initialized and ready to create a browser window
// This method is called
app.on('ready', function() {
  // Create a browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // Load the application index.html
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // Open development tools
  mainWindow.openDevTools();

  // When Windows is shut down, the event will be sent out.
  mainWindow.on('closed', function() {
    // Remove references to windows objects if your application supports multiple windows.
    // Often, multiple window s objects are stored in an array.
    // But not this time.
    mainWindow = null;
  });
});

1.2 Create configuration file package. JSON (npm init-y)

The package.json format is exactly the same as Node, and the script file declared by the main field is the startup script for your application, which runs on the main process. The package.json in your application should look like:

{
  "name"    : "app",
  "version" : "1.0.1",
  "main"    : "main.js"
}

Running Electron Applications

Install the electronic-prebuilt runtime project

npm install electron-prebuilt -save

You just need to run your application directly as follows

electron .

The program was successfully executed.

Electron Application Packaging

Install electron-packager

npm install electron-packager --save-dev

After installation, you can see in package.json:

"devDependencies": {
    "electron-packager": "^8.7.2"
}

Packing phase (there are two ways)

1.1 Package directly with commands

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

Instructions:

location of project: the path where the project is located
name of project: the name of the packaged project
Platform: Determine which platform applications you want to build (Windows, Mac or Linux)
architecture: decides whether to use x86 or x64 or two Framework All of them are used.
Electronic version: Electronic version
Optional options: optional options

The command is relatively long, and it would be annoying to pack it with this command every time. The second method can be used.

1.2 First add code under package.json scripts under the project root directory

"packager": "electron-packager ./ HelloWorld --all --out ./outApp --version 1.4.0 --overwrite --icon=./app/img/icon/icon.ico"

all can be replaced by -- platform=win32 --arch=ia32

Platform is a publishing platform
- win32 refers to windows platform
- linux
- darwin
arch=ia32 refers to 32-bit windows 64-bit and x64

Create a new outApp directory in the project

app/
├── package.json   
├── node_modules   
├── outApp  
├── main.js          
├── renderer.js      
└── index.html

Use the command npm run-script packager

npm run-script packager

After the execution of the packaged command, you may encounter the following problems:

Packaging app for platform win32 ia32 using electron v1.0.1
Downloading tmp-1156-0-electron-v1.0.1-win32-x64.zip
Error: connect ETIMEDOUT 52.216.0.16:443
connect ETIMEDOUT 52.216.0.16:443

What we need to do at this time is to turn over the wall (turn on the blue light and turn over the wall software). If we execute npm run-script packager several times, we can succeed.

Successful screenshots are as follows:

Packing Successful~~

Topics: Javascript Windows JSON npm

Programmer Think