The method for generating exe executable files on the web front-end page.

The method for generating exe executable files on the web front-end page.

With the rise of HTML5 and the unification of JavaScript, a technology called [cross-platform] is becoming increasingly popular. Why is it so hot? Software developers only need to write a program once to run on Windows, Linux, Mac, IOS, Android, and other platforms. This greatly reduces the workload of programmers and enables fast reading and iteration of the company's products. Previously, cross-platform technology was not favored. Today, with the development of mobile phones and computer hardware, it is developing rapidly. This is almost driven by the HTML5 technology. Of course, the JavaScript language is the greatest hero.

HTML5-based cross-platform technologies are well-known, such as PhoneGap and Cordova, which are often used to develop webapps, Egret, Cocos-creator, and Unity. They are often used to develop games, and Node-based. nw of js. js, used to develop desktop applications, and Electron, a more powerful than nw. js also uses powerful web technologies to develop the artifacts of desktop applications.

In fact, the above are all nonsense. Now we are going to the topic: How to Use Electron to package the web page into an exe executable file!

Hypothesis:

1. You have installed and configured node. js (Global installation)
2. You have installed electron with npm (Global installation)
3. You have already written the front-end webpage (html, css, javascript, or a webpage written based on these front-end frameworks)
4. If you cannot understand the above three points, go to Baidu...

If you have the above assumptions, proceed with the following:

1. Find your front-end webpage project folder and create three files package.jsondomainmain.js?index.html (Note: index.html is your homepage)

Your project directory/

├── package.json├── main.js└── index.html

2. Add the following content to package. json:

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

3. Add the following content to main. js. The main. js file is the "main" key value in package. json above, so you can modify it as needed.

const {app, BrowserWindow} = require('electron')const path = require('path')const url = require('url')// Keep a global reference of the window object, if you don't, the window will// be closed automatically when the JavaScript object is garbage collected.let winfunction createWindow () { // Create the browser window. win = new BrowserWindow({width: 800, height: 600}) // and load the index.html of the app. win.loadURL(url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true })) // 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 your app supports multi windows, this is the time // when you should delete the corresponding element. win = null })}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.on('ready', createWindow)// Quit when all windows are closed.app.on('window-all-closed', () => { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit() }})app.on('activate', () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (win === null) { createWindow() }})// In this file you can include the rest of your app's specific main process// code. You can also put them in separate files and require them here.

4. If the homepage name of Your webpage is not javasindex.html, modify 'index.html 'in main. js to your homepage name.

5. Open DOS, cd to your project directory (or directly shift + Right-click a blank place in your project directory, and then click here to open the command window, which cannot be understood here, alas, Baidu Ba Nian)

6. Inputnpm install electron-packager -gInstall our packaging artifacts globally

npm install electron-packager -g

7. After installing the packaging artifact, enter electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_modulesYou can start packaging.

electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_modules

What does this command mean? You can modify the blue part by yourself:

Electron-packager. Name of the executable file -- win -- out: name of the folder packaged into -- arch = x64 or 32-bit -- version number -- overwrite -- ignore = node_modules

8. After the package is successful, a new folder will be generated, click in, find the exe file, and double-click it to see that the web page has become a desktop application!

The above is the simplest packaging method. As for how to modify the window size, how to add the menu bar, and how to call the system API, you will be able to study Electron.

If the package is always unsuccessful, it is annoying, and you have no requirements for the extended functions,

Click to enter my Coding code repository: https://coding.net/u/linhongbijkm/p/Electron-packager-build-project/git

The content "hello, world" index.html web page has been packaged as a desktop application in windows through the Electron framework.

Now, you only need to copy your webpage front-end project to the/resources/app/project directory and double-click the exe file to run your webpage as a desktop application.

Summary

The above section describes how to generate an exe executable file on the web Front-end page. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!