So generieren Sie eine ausführbare Exe-Datei von der Web-Frontend-Seite

Mit dem Aufstieg von HTML5 und JavaScript, die versuchen, die Welt zu dominieren, wird eine Technologie namens [plattformübergreifend] immer beliebter. Warum ist es so beliebt? Da Softwareentwickler das Programm nur einmal schreiben müssen, kann es auf Windows, Linux, Mac, IOS, Android und anderen Plattformen ausgeführt werden, was die Arbeitsbelastung des Programmierers erheblich reduziert und eine schnelle Iteration der Produkte des Unternehmens ermöglicht. In diesem Artikel wird hauptsächlich vorgestellt, wie Electron Webseiten in Desktop-Anwendungen verpackt (wie Web-Front-End-Seiten ausführbare Exe-Dateien generieren).

In der Vergangenheit war die plattformübergreifende Technologie nicht beliebt, aber jetzt entwickelt sie sich mit der Entwicklung von Mobiltelefonen und Computerhardware rasant weiter. All dies wird fast durch die HTML5-Technologie vorangetrieben. Natürlich leistet JavaScript den größten Beitrag. Zu den bekannten plattformübergreifenden Technologien auf HTML5-Basis gehören PhoneGap und Cordova, die häufig zur Entwicklung von Webanwendungen verwendet werden; außerdem gibt es Egret, Cocos-creator, Unity usw., die häufig zur Entwicklung von Spielen verwendet werden; basierend auf Node.js, das für die Entwicklung von Desktop-Anwendungen verwendet wird, und Electron, einem Artefakt, das Webtechnologie nutzt, um Desktop-Anwendungen zu entwickeln, die leistungsfähiger sind als nw.js.

Eigentlich ist das oben Genannte alles Unsinn. Kommen wir nun zum Thema: Wie man mit Electron eine Webseite in eine ausführbare Exe-Datei packt!

Annahmen:

1 Sie haben node.js installiert und konfiguriert (globale Installation)
2 Sie haben Electron mit npm installiert (globale Installation)
3 Die Front-End-Webseite wurde bereits geschrieben (HTML, CSS, Javascript usw. oder die auf dem Front-End-Framework basierende Webseite)
4. Wenn Sie die oben genannten drei Punkte nicht verstehen, gehen Sie zu Baidu schnell. . .

Wenn Sie die oben genannten Annahmen haben, lesen Sie bitte weiter:

1. Suchen Sie Ihren Front-End-Webprojektordner und erstellen Sie eine neue Datei package.json, main.js, index.html (Hinweis: index.html ist die Startseite Ihrer Webseite)

Ihr Projektverzeichnis/

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

2. Im Paket hinzufügen Folgender Inhalt zu json

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

3. Fügen Sie den folgenden Inhalt zu main.js hinzu. Diese main.js-Datei ist die „Hauptdatei“ in der package.json oben. Der Wert des Schlüssels, sodass Sie ihn nach Bedarf ändern können

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 win
function 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. Wenn der Dateiname Ihrer Webseiten-Homepage nicht „index.html“ lautet, Fügen Sie es dann bitte in main.js ein. Ändern Sie die darin enthaltene Datei „index.html“ in den Namen Ihrer Homepage-Startseite.

5. Öffnen Sie DOS, wechseln Sie mit der CD in Ihr Projektverzeichnis (oder klicken Sie direkt bei gedrückter Umschalttaste und der rechten Maustaste auf a Leerzeichen in Ihrem Projektverzeichnis und dann Klicken Sie hier, um das Befehlsfenster zu öffnen. Wenn Sie hier leider nicht verstehen, ist Baidu ein Junge)

6. Geben Sie im vorherigen Schritt unter DOS um unser Verpackungsartefakt global zu installieren npm install electron-packager -g

npm install electron-packager -g

7. Geben Sie nach der Installation des Verpackungsartefakts, immer noch im DOS des vorherigen Schritts,

ein, um mit der Verpackung zu beginnen electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_modules

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

Was bedeutet dieser Befehl? Der blaue Teil kann von Ihnen selbst geändert werden:

electron-packager Der Dateiname der ausführbaren Datei – win – aus dem Namen des gepackten Ordners – arch = x64 Bit oder 32 Bit – Versionsnummer - -overwrite --ignore=node_modules

8. Nach erfolgreicher Verpackung wird ein neuer Ordner erstellt und die exe-Datei wird angezeigt Die Webseitenänderung ist zu einer Desktop-Anwendung geworden!

Das Obige ist die einfachste Verpackungsmethode. Wie Sie die Fenstergröße ändern, die Menüleiste hinzufügen, die System-API aufrufen usw wird Electron langsam für Sie studieren.

Wenn Ihre Paketierung immer fehlschlägt und Sie es als störend empfinden und Sie keine Anforderungen an erweiterte Funktionen haben,

Klicken Sie, um mein Coding-Code-Repository aufzurufen: https://coding.net/u/ linhongbijkm/p/Electron-packager-build-project/git

enthält die index.html-Webseite mit dem Inhalt hello,world, den ich über das Electron-Framework in eine Desktop-Anwendung in der Windows-Umgebung gepackt habe.

Jetzt kopieren Sie einfach Ihr Web-Frontend-Projekt in das Verzeichnis /resources/app/project, doppelklicken Sie auf die exe-Datei, um Ihre Webseite als Desktop-Anwendung auszuführen.

Verwandte Empfehlungen:

php und js öffnen lokales EXE-Programm und übergeben relevante Parametermethode

So geht's die Webseite Desktop-Exe-Programm aufrufen

Implementierungsmethode des installierbaren Exe-Programms in Java

Das obige ist der detaillierte Inhalt vonSo generieren Sie eine ausführbare Exe-Datei von der Web-Frontend-Seite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!