Summary of the use of the front-end framework Electron

Table of contents

1. Electron official case building environment

I believe that every programmer is familiar with web applications. PC-side applications may be developed at the bottom layer, but not too much. The following set of technology stacks is designed for front-end programmers to quickly build Windows, Linux, and Mac PC-side applications with one click. Raw, as long as you can React to realize web development. Electron is widely used, and the VScode editor is made by the Electron framework.

Electron official documentation:

Introduction | Electron

1. Basic construction

Build with scaffolding

Electron Scaffolding - ElectronForge Documentation - wanzheng_96's Blog - CSDN Blog

1. Electron official case building environment

Quick Start | Electron

See my code after building this step:

At this point our project structure:

The main.js code is as follows:

const { app, BrowserWindow } = require('electron')

app.on("ready",()=>{
    const mainWindow = new BrowserWindow({
        width: 500,
        height: 500
    })
    
    mainWindow.loadFile('./src/index.html').then()
})

Run the project:

npm run start

A small window pops up:

The first case ran successfully!

But there is no hot update function at this time. Every time we modify the code, we need to restart, so add a hot update dependency here:

yarn add --dev electron-reloader

main.js is modified as follows:

const { app, BrowserWindow } = require('electron')

//热加载
const reLoader=require("electron-reloader")
reLoader(module)

//监听初始化完成的生命周期
app.on("ready",()=>{
    const mainWindow = new BrowserWindow({
        width: 700,
        height: 700
    })
    
    mainWindow.loadFile('./src/index.html').then()
})

This will have a hot update function.

2. View debugging

You can view the console through ctl+shift+i

3. Using the menu

Reference documentation: Menu | Electron

Create menu.js in the same directory as main.js to store menu data. The code of menu.js is as follows:

const { BrowserWindow, Menu } = require("electron")
//定义菜单模板
const template = [
    {
        label: "文件",
        submenu: [
            {
                label: "新建窗口",
                click () {
                    new BrowserWindow({
                        width: 500,
                        height: 500
                    })
                }
            }
        ]
    },
    {
        label: "关于我们"
    }
]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

Then import it into main.js, the code after importing is as follows:

const { app, BrowserWindow } = require("electron")

//热加载
const reLoader = require("electron-reloader")
reLoader(module)

//监听初始化完成的生命周期
app.on("ready", () => {
    const mainWindow = new BrowserWindow({
        width: 700,
        height: 700
    })
    
    mainWindow.loadFile("./src/index.html").then()
})

require("./menu.js")

Effect: After clicking File -> New, a new window pops up

custom menu

Effect: You can see that there is no border at this time

The customized menu only needs to be written into the corresponding page through html, etc.!

4. Icon configuration

5. Project packaging

Option 1: electron forge package, official recommendation

Electron Tutorial (3) How to Package Electron Program: Electron-forge Tutorial_October ooOO's blog-CSDN Blog

Option 2: Windows packaging

App packaging

Here we use electron-packager for packaging. Download and install globally:

npm install -g electron-packager

Execute the following packaging command in the project root directory:

electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64

Here, we declare that the project name is HelloWorld, and it is only packaged to the Windows 64-bit platform, and the packaged output file is the HelloWorldApp directory one level above the root directory. After execution it will output:

Packaging app for platform win32 x64 using electron v9.0.3
Wrote new app to ..\HelloWorldApp\HelloWorld-win32-x64

We will find the following files in the ..\HelloWorldApp\HelloWorld-win32-x64 directory:

Double-click HelloWorld.exe to run our application.

Because we have to enter such a long string of commands every time we package, the efficiency is extremely low, and there is no joy in programming. We can write the package name in the package.json file. Add the following configuration to the scripts configuration section:

"package": "electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64"

Then execute the following command to package:

npm run-script package