So verpacken Sie das Uniapp-Projekt als Desktop-Anwendung

So verpacken Sie das Uniapp-Projekt als Desktop-Anwendung

Electron installieren

cnpm installiere Electron -g

Installieren Sie Electron-Packager

cnpm installiere Electron-Packager -g

Änderung von manifest.json von uniapp

Bildbeschreibung hier einfügen

H5-Verpackung

Bildbeschreibung hier einfügen

Erstellen Sie package.json und main.js im Ordner H5

Bildbeschreibung hier einfügen

Erstellen Sie eine neue Datei package.json

{
  "Name" : "App-Name",
  "version" : "0.1.0",
  "Haupt": "Haupt.js"
}

Erstellen Sie main.js

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

// Behalten Sie eine globale Referenz auf das Fensterobjekt bei, sonst wird das Fenster
// wird automatisch geschlossen, wenn für das JavaScript-Objekt die Speicherbereinigung durchgeführt wird.
lass gewinnen

Funktion Fenster erstellen () {
  // Browserfenster erstellen.
  win = neues Browserfenster({Breite: 800, Höhe: 600})

  // und lade die index.html der App.
  win.loadURL(url.format({
    Pfadname: Pfad.join(__dirname, 'index.html'),
    Protokoll: 'Datei:',
    Schrägstriche: wahr
  }))

  // Öffnen Sie die DevTools.
  // win.webContents.openDevTools()

  // Wird ausgegeben, wenn das Fenster geschlossen wird.
  win.on('geschlossen', () => {
    //Dereferenzieren Sie das Fensterobjekt. Normalerweise würden Sie Fenster
    // in einem Array, wenn Ihre App mehrere Fenster unterstützt, ist dies die Zeit
    // wann Sie das entsprechende Element löschen sollten.
    Sieg = null
  })
}

// Diese Methode wird aufgerufen, wenn Electron fertig ist
// Initialisierung und ist bereit zum Erstellen von Browserfenstern.
// Einige APIs können erst verwendet werden, nachdem dieses Ereignis eintritt.
app.on('bereit', Fenster erstellen)

// Beenden, wenn alle Fenster geschlossen sind.
app.on('Fenster-alle-geschlossen', () => {
  // Unter macOS ist es üblich, dass Anwendungen und deren Menüleiste
  // aktiv bleiben, bis der Benutzer explizit mit Cmd + Q beendet
  wenn (Prozess.Plattform !== 'darwin') {
    app.beenden()
  }
})

app.on('aktivieren', () => {
  // Unter macOS ist es üblich, ein Fenster in der App neu zu erstellen, wenn das
  // Auf das Dock-Symbol wird geklickt und es sind keine anderen Fenster geöffnet.
  wenn (win === null) {
    Fenster erstellen()
  }
})

// In diese Datei können Sie den Rest des spezifischen Hauptprozesses Ihrer App einbinden
// Code. Sie können sie auch in separate Dateien einfügen und hier anfordern.

Pack

Es wird empfohlen, cmd zu verwenden. Bei der Verwendung von Powershell und Git Hash sind mir einige Probleme begegnet. Drücken Sie Umschalt+Rechtsklick auf das Stammverzeichnis oder wechseln Sie per CD in Ihr Verzeichnis.

Rufen Sie das Verzeichnis H5 über die cmd-Befehlszeile auf und geben Sie den Verpackungsbefehl ein

electron-packager . Name der ausführbaren Datei --win --out Name des gepackten Ordners --arch=x64 oder 32-bit --electron-version Versionsnummer (nicht Ihre h5-Versionsnummer, sondern die Electron-Versionsnummer) --overwrite --ignore=node_modules

Verpackungsbeispiel

electron-packager . MeineApp --win --out MeineApp --arch=x64 --electron-version 1.0.0 --overwrite --ignore=node_modules

siehe

https://ext.dcloud.net.cn/plugin?id=2905
https://www.cnblogs.com/shangrao/p/14661884.html

Damit ist dieser Artikel über die Schritte zum Verpacken des Uniapp-Projekts als Desktop-Anwendung abgeschlossen. Weitere relevante Inhalte zum Verpacken von Uniapp-Projekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Methoden und Vorschläge zur Uniapp-Projektoptimierung
  • So verwenden Sie MQTT im Uniapp-Projekt
  • Basierend auf dem Live-Broadcast-Projekt vue+uniapp imitiert uni-app die Live-Broadcast-Raumfunktion von Douyin/Momo
  • CentOS 7.2 erstellt einen Nginx-Webserver zum Bereitstellen des Uniapp-Projekts

<<:  MySQL-Lernzusammenfassung: Ein vorläufiges Verständnis des Architekturdesigns der InnoDB-Speicher-Engine

>>:  JavaScript mit Ckeditor + Ckfinder - detaillierte Erläuterung zum Hochladen von Dateien

Artikel empfehlen

Nginx-Reverseproxy und Lastausgleichspraxis

Reverse-Proxy Unter Reverse-Proxy versteht man de...

Docker legt Port 2375 frei, was zu Serverangriffen und -lösungen führt

Ich glaube, dass Studenten, die etwas über die Do...

Änderung der Standardquelldatei sources.list des Ubuntu20.04 LTS-Systems

Wenn Sie den Inhalt der Datei „source.list“ verse...

So erstellen Sie ein Drag & Drop-Plugin mit benutzerdefinierten Vue-Direktiven

Wir alle kennen die Drag-and-Drop-Funktion von HT...

Mehrere Möglichkeiten zum Speichern von Bildern in einer MySQL-Datenbank

Normalerweise müssen die von Benutzern hochgelade...

CSS3-Randeffekte

Was ist CSS? CSS (Abkürzung für Cascading Style S...

MySQL-Integritätsbeschränkungen – Definition und Beispiel-Tutorial

Inhaltsverzeichnis Integritätsbeschränkungen Defi...

Detaillierte Erläuterung gängiger Methoden von JavaScript Array

Inhaltsverzeichnis Methoden, die das ursprünglich...

Gängige Master-Slave-Replikationsarchitekturen in MySQL 4

Inhaltsverzeichnis Replikationsarchitektur mit ei...

Vue führt einen einfachen zufälligen Namensaufruf durch

Inhaltsverzeichnis Layoutteil: <div id="a...

jQuery zum Erreichen des Sperrfeuereffekts

In diesem Artikel wird der spezifische Code von j...

Was ist HTML?

Geschichte der HTML-Entwicklung: HTML steht im En...

Vue verwendet Canvas-Handschrifteingabe, um Chinesisch zu erkennen

Effektbild: Vorwort: Kürzlich arbeitete ich an ei...