Electron Learning Path for a UI Designer

There has been contact with Electron for some time, about 3 months, but it is just contact, not thorough study. There are few Electron tutorials found on the Internet. HelloWorld is full of heartburn. As a designer, because only know some fur on the front, it is small white in the logic layer and bottom business development. Remember hereRecord my learning experience, share some learning experience, like me, learning programming from 0, can learn from each other.

Learn electronics, the environment is not detailed here, a large number of online search electrons, so just a simple description, development environment win10, development tool VScode.

1. Environment & Development Tools

Install Runtime Environment [NodeJS] Download Address: https://nodejs.org/en/
Install the development tool [VScode] download address: https://code.visualstudio.com/

(2) Installation of mirror tools

Open console [cmd] Install npm's Taobao mirror cnpm (you don't need to install it if you can turn over the wall)

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

(3) Installation of electron operating environment

Install electron

cnpm install -g electron

(4) Download of electron template

Download electron Quick Build Template

Run the electron template

Unzip to an English path, e.g. D:develectron, open the console cmd

cd D:\dev\electron

Query the environment and version, make sure they are all OK to continue

Unzip the file structure of electron-quick-start

Input in Console

npm start 

OK, you're already running. It's 0.0000001 steps in the 10,000-mile march, which you can ignore and forget.

Use of VScode

Next we go to VScode to see the code.

Later, we can debug directly in VScode, the menu bar opens the terminal - > New terminal, and the console window of powershell appears at the bottom for command operation.

Understanding template code

If you have knowledge of web design, it will be helpful to get started. If you don't know HTML, CSS, Javascript, I recommend that you first find some free courses to learn.Assuming that you, like me, know something about it, we will continue to learn and understand.

The files corresponding to the four tags in the screenshot above are the core files of the village, and the electron development is based on these files.

  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^7.1.0"

package.json stores the basic information for the entire app, just like our personal introduction, so you can read through it to find out what information it contains.

<!-- index.html -->

<!DOCTYPE html>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>

index.html and renderer.js are the rendering layers, the levels we can see, where basic visual and interactive operations are written.

// main.js

// app and Browser Window Modules Introducing electron
const {app, BrowserWindow} = require('electron')
// Introduce the path module of nodejs to handle file paths
const path = require('path')

// Declare Main Form
let mainWindow
// Create Form Function
function createWindow () {
  mainWindow = new BrowserWindow({
  // There are many form properties, so take a look at https://electronjs.org/docs/api/browser-window#new-browser windowoptions yourself
    width: 800, // Width 800
    height: 600, //Height 600
    webPreferences: { // Web page functionality, such as preloading, can be added, but that's okay. It's generally useful for software optimization
      preload: path.join(__dirname, 'preload.js') // Preload some programs to improve efficiency
  // The main form loads the web page and the form is equivalent to a simplified version of the chrome browser
  // Closed is when the main form is closed, execute the code, and set the form to null
  mainWindow.on('closed', function () {
    mainWindow = null
// app is the event lifecycle of this application, and each cycle executes code such as what to do after read and what to do after activate.
// Let's go to electron's documentation and connect to https://electronjs.org/docs/api/app
app.on('ready', createWindow) // Create form when app triggers Ready
// App Trigger [Forms are closed] Execute app exit command
app.on('window-all-closed', function () { 
  if (process.platform !== 'darwin') app.quit()
// Keep the main form visible when the app triggers
app.on('activate', function () {
  if (mainWindow === null) createWindow()

main.js is the main process, which is equivalent to the background control program. This part is the core part of electron, and the difficulty of later learning is also in this part.All of the above are commented, so you can take a closer look.

Tags: node.js npm github JSON Programming

Posted on Fri, 08 Nov 2019 21:03:31 -0500 by Tezread