Electron Quick Start

Transfer from http://electron.atom.io/docs/tutorial/quick-start/

Electron allows you to create desktop applications using JavaScript and a rich system-level API. You can think of the electron as a variant of the node. JS runtime, focusing on desktop applications, while node. JS focuses on the Web server.

Electron is not a GUI library written in JavaScript, but an electron uses a Web page as a GUI, in fact the electron is a small Google browser, using JavaScript control program logic. main processes (main process)

In electron, the process of running the main script in the Package.json file is called the main process. Scripts that run in the main process can display the GUI by creating a Web page window. rendering Processes (Renderer process)

Because electron uses the Google Chrome kernel (Chromium) to display Web pages, electron also inherits Chromium's multi-process architecture. Each Web page in the electron is run in a separate process called the rendering process (renderer).

In a normal browser, a Web page typically runs in a sandbox environment and does not allow access to local resources. However, in electron, the system-level APIs provided by node. JS can be used to interact with the operating system. the difference between the main process and the rendering process

The main process creates a Web page by creating a Browserwindow instance. Each Browserwindow instance runs a Web page in the first stand-alone render process. When the Browserwindow instance is destroyed, the corresponding rendering process is also terminated.

The main process manages all the Web pages and their corresponding rendering processes. Each rendering process is independent of each other and only cares about the corresponding page.

In Web pages, invoking GUI-related APIs is not allowed because managing GUI resources in Web pages is unsafe and can lead to resource leaks. If you want to perform GUI-related operations on a Web page, the rendering process in which the Web page resides must communicate with the main process and request the main process to perform the relevant operation.

In electron, there are several ways to communicate between the main process and the rendering process. Ipcrenderer and Ipcmain are used to send messages, and remote modules are used for RPC communication. In addition, one of the FAQs is to discuss how to share data between Web pages. writing the first electron application

Usually an electron application structure is as follows:

your-app/
├──package.json
├──main.js
└──index.html

The format of the Package.json file content is the same as the module in node. js. The "main" property specifies the startup script for the application that will run as the main process. An example of Package.json is as follows:

{
  "name"    : "Your-app",
  "version": "0.1.0",
  "main"    : "Main.js"
}

Note: If the "main" attribute is not specified, the electron will load the script file named Index.js by default.

Main.js should create windows and handle system events, a typical example is:

const {app, Browserwindow} = require (' electron ')//Keep a global reference of the Window object, if you don ' t, the Windo
W would/be closed automatically when the JavaScript object is garbage collected.
  Let win function CreateWindow () {//Create the browser window.
  Win = new Browserwindow ({width:800, height:600})//And load the index.html of the app.
  Win.loadurl (' file://${__dirname}/index.html ')//Open the DevTools.
  Win.webContents.openDevTools ()//emitted when the window is closed. Win.on (' Closed ', () = {//dereference the Window object, usually you would store windows//In an array if yo
    UR app supports multi windows, this is the time//If you should delete the corresponding element. win = null})}//This method would be called when Electron have finished//initialization and is ready to create brows
Er windows.
Some APIs can only is used after this event occurs. App.on (' Ready ', CreateWindow)//Quit While all Windows is CLOsed. App.on (' window-all-closed ', () = {//on MacOS It's common for applications and their menu bar//To stay AC tive until the user quits explicitly with CMD + Q if (process.platform!== ' Darwin ') {App.Quit ()}}) App.on (' AC Tivate ', () = {//on MacOS It's common to re-create a windows in the app when the//dock icon is clicked and ther
  E is no other windows open. if (win = = = null) {CreateWindow ()}})//In this file can include the rest of the your app ' s specific main proces S//code. You can also put them in separate files and require them here.

Finally, index.html is the page content that needs to be displayed:

<! DOCTYPE html>
 
running the application 
Once you have created the Main.js,index.html,package.json file, you need to run the program and test whether the program is the expected effect. Electron

The electron is a NPM module that contains a pre-compiled electron.

Install the electron module using NPM and execute the following command: macos/linux

$./node_modules/.bin/electron.
 
Windows 
$. \node_modules\.bin\electron.
 
manual download of electron 
If the electron is manually downloaded, then: Windows

$. \electron\electron.exe your-app\
 
Linux 
$./electron/electron your-app/
 
MacOS 
$./electron.app/contents/macos/electron your-app/
 
Electron can download the https://github.com/electron/electron/releases Publishing application here

http://electron.atom.io/docs/tutorial/application-distribution/ Example

# Clone The repository
$ git Clone https://github.com/electron/electron-quick-start
# Go into the repository
$ cd Electron-quick-start
# Install dependencies and run the app
$ npm Install && npm start