June 30, 2021, the year of the Ox has just passed half, here to all colleagues and their own say hard!! Meet the road hard, must be rivers and lakes, scattered rivers and lakes, is the fate of people, as deep as the sea, from the southeast branch hanging…

Recalling the past, the extraordinary years, looking back to that time :2014, at that time, the housing price in Xi ‘an was half dead, and the meat and steamed bun was less than five meters. In that year, a beautiful boy with bright eyes and bright teeth and imposing appearance appeared in Shanghai Beach. From then on began his naked ass Wolf ———— bold and shameless front office career.

Front end of the line, say simple is really simple, during the period of university, was absent from school the teacher didn’t know, but by approaching graduation, caocao to see a few book website editor with javaScript, find a job just living, when treatment is quite sweet and simple introduction to all of this is attributed to the front, but this one ok, want to feel well, Hehe hehe, it’s good to have dreams, it’s good. Front-end update iteration is really fast, market recruitment basic requirements :H5, C3, three frameworks, plus a variety of scattered points, such as: Canvas, PS, D3, Node and so on, there is no end to learning, all programmers are the most eager to learn, we have been pushed by the demand, forced to learn… This is not: a few days ago came a requirement, front-end service to obtain the Mac address, package Windows installation package such as: EXE or MSI… Here’s my first reaction to the requirement:

With a smile, heart a string of chaotic code, half an hour later, clean up the mood, roaring: brave niuniu, not afraid of difficulties, and then set foot on the journey…

First, get the Mac address of your computer. C# can, second, generate exe or msi installation package, well, even better, C# can, right… I won’t, split… Maybe it wasn’t meant to be… Perhaps the front-end goddess could not bear to see my exhaustion of tricks and tricks secretly lifted my skirt, between the flash of inspiration, Node this annoying little demon rushed into my mind, war song, from ~~~

Open Vscode, create a new demo folder, and add main.js with the following code:

var os = require('os')

var networkInfoObj = os.networkInterfaces();

console.log(networkInfoObj);
Copy the code

The terminal executes: node main.js, and the result is as shown in the figure below:

Oh, ho, this is… Got the…? Self test after a circle confirmed, got!! (Since my computer is a Mac, the result of executing the command will be different from that of Windows users. Windows users must, must, must pay attention to the Mac address data structure of laptops with dual network cards, which will not be described here.)

After getting the Mac address, start the next step of pit filling. Here, the need is to open a fixed project by opening the software, which is……. Research research, ok! Our company and Baidu have a long and good cooperative relationship, a huge treasure was finally found in millions of sand and gravel gold miners:

OK, go!!

Install: NPM install electron

Of course, use Taobao image faster yo CNPM install electron

/node_modules/. Bin /electron -v

Run the./node_modules/.bin/electron command./node_modules/.bin/electron

Oh ho, it just opened…? Is that amazing?? Open a window and display the electron website-style page, nice!! How to replace the official website page with our page

New main.js code

Var mainWindow = null var app = electron.app // Var Menu = electron.Menu // Define the Menu of the electron window, which is not involved in the author's requirements. Var BrowserWindow = electron.BrowserWindow // Define the method app.on('ready', SetApplicationMenu (null) mainWindow = new BrowserWindow({width:1280, height:1024, icon: './logo.ico'}) // define the window initialization property mainwindow.loadurl ('https://www.baidu.com?key=' + json.stringify (networkInfoObj)) // MainWindow. On ('closed', () =>{mainWindow = null}) // Listen for window closing events, free memory, save energy})Copy the code

The terminal runs the electron command.

Running the above code results in the following:

It’s open. Halfway done. Kayson, try packing

NPM init –yes (all options agreed by default)

Generate package.json, at which point package.json is automatically associated with main.js

NPM install electrope-packager –save-dev Because the installation package of the current computer needs to be downloaded, the process is slow, and exe cannot be generated on the Mac, so… Switch to a Windows computer…

After installation, add the scripts property to package.json and configure it

"scripts": {"package": "Electron packager./ Test package project --all --out./OutApp --electron-version 13.1.4 --overwrite --icon=logo.ico"}, // Run the pack command: NPM run package // Packaged program name: test package project // --all Package all types of projects, such as: Mac, Windows, etc./ / --out./OutApp Generated projects stored in the OutApp folderCopy the code

NPM run package will download the generated system file dependencies for the first time. It is very unique son

Finally, the packing is done

Take a look at the packaged OutApp folder

This is a packaged exe program, click test installation package. Exe…

Did you cry… Not easy, not easy…

However, the installation package to be delivered to the user is usually only an EXE file or MSI file, double-click the decompression installation is ready to eat, so continue to work hard, download the edit compression software :Inno Setup icon looks like this

In order to facilitate you to gather the food, uploaded baidu cloud, download address: pan.baidu.com/s/18S6AGC2m… Extraction code: YF2x

Once installed, the opening screen looks like this

And then…

Select Script Wizard to create a new script file (S)

Click next

Fill in the basic information of the post-production program

Set application folder information. The default Settings are recommended

Browse to select the main exe execution file

Select the main executor, (executable EXE file)

Add other files attached to the program (other files called by the main exe program)

Select the home directory where the program files reside

Pop-up whether to include subfolders, select [Yes]

Confirm the path of the main exe and its attached files, click Next, set other information or leave the default Settings

Set the license information and prompt information during application installation, which can be left blank

Select program installation mode, administrator by default

Select an optional language for program installation. The default language is Chinese

Select the save location, exe file name, EXE program icon and password of the encapsulated EXE installer

Click “Next” when prompted.

Complete the tip

Is the script compiled? Click yes

Save the script document for next compilation (with or without)

Package complete, find the package good program, double click can be installed according to the steps, la la la la la, open sen!!

The above is the whole process of the encounter with the Electron leprechaun, exciting, thrilling and interesting. After the completion, there is a sense of satisfaction after the smoke. I hereby solemnly thank the former pathfinder