Heim > Web-Frontend > uni-app > So führen Sie „hello uniapp' aus

So führen Sie „hello uniapp' aus

藏色散人
Freigeben: 2023-01-13 00:44:24
Original
12969 Leute haben es durchsucht

So führen Sie hello uniapp aus: Verwenden Sie zunächst die visuelle Benutzeroberfläche des HBuilderX-Tools, klicken Sie dann in der Symbolleiste auf „Datei->Neu->Projekt“ und wählen Sie zum Erstellen den Typ „uni-app“ aus „Projekt und klicken Sie in der Symbolleiste auf „Ausführen“.

So führen Sie „hello uniapp' aus

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Uni-App-Version 2.5.1, Thinkpad T480-Computer.

Empfohlen (kostenlos): Uni-App-Entwicklungs-Tutorial

Uni-App unterstützt die schnelle Erstellung von Projekten über die visuelle Benutzeroberfläche und die Vue-CLI-Befehlszeile.

1. Über die visuelle Schnittstelle von HBuilderX

Die Visualisierungsmethode verfügt über integrierte verwandte Umgebungen und kann sofort verwendet werden, ohne Nodejs zu konfigurieren.

Vor dem Start müssen Entwickler die folgenden Tools herunterladen und installieren:

HBuilderX: Offizielle IDE-Download-Adresse https://www.dcloud.io/hbuilderx.html

HBuilderX ist ein allgemeines Front-End-Entwicklungstool, aber es ist uni-app Spezielle Verbesserungen vorgenommen.

Laden Sie die App-Entwicklungsversion herunter, die sofort verwendet werden kann. Wenn Sie die Standardversion herunterladen, werden Sie beim Ausführen oder Veröffentlichen von Uni-App aufgefordert, das Uni-App-Plug-In zu installieren, was nur möglich ist Wird nach dem Herunterladen des Plug-ins verwendet.

Wenn Sie zum Erstellen eines Projekts CLI verwenden, können Sie die Standardversion direkt herunterladen, da das Uni-App-Kompilierungs-Plug-In im Projekt installiert ist.

Uni-App erstellen

Klicken Sie in der Symbolleiste auf Datei-> Neu-> wird erfolgreich erstellt.

Zu den Vorlagen, die mit uni-app geliefert werden, gehört Hello uni-app, eine offizielle Komponente und ein API-Beispiel. Eine weitere wichtige Vorlage ist die Uni-UI-Projektvorlage, die für die tägliche Entwicklung empfohlen wird und über eine große Anzahl häufig verwendeter Komponenten verfügt. So führen Sie „hello uniapp aus

Uni-App ausführen

So führen Sie „hello uniapp aus

1. Starten Sie das Hello-Uniapp-Projekt, klicken Sie auf „Ausführen“ im Browser – und Sie können es ausführen im Browser Erleben Sie die H5-Version von uni-app.

2. Echter Maschinenbetrieb: Schließen Sie das Mobiltelefon an, aktivieren Sie das USB-Debugging, rufen Sie das Hello-Uniapp-Projekt auf, klicken Sie auf „Ausführen“ und wählen Sie das laufende Gerät aus Erleben Sie es in der Geräte-Uni-App.

So führen Sie „hello uniapp aus

3. Wenn das Telefon nicht erkannt wird, klicken Sie bitte auf das Menü Ausführen – Auf Mobiltelefon oder Simulator ausführen – Allgemeine Anleitung zur Fehlerbehebung für den Betrieb einer echten Maschine. Beachten Sie, dass für die aktuelle Entwicklung von Apps auch die Installation von WeChat-Entwicklertools erforderlich ist.

In den WeChat-Entwicklertools ausführen: Rufen Sie das Hello-Uniapp-Projekt auf, klicken Sie in der Symbolleiste auf „Ausführen zum Mini-Programmsimulator“ und Sie können uni-app in den WeChat-Entwicklertools erleben. So führen Sie „hello uniapp aus

Hinweis: Wenn Sie es zum ersten Mal verwenden, müssen Sie den entsprechenden Pfad der Miniprogramm-Idee konfigurieren, bevor es erfolgreich ausgeführt werden kann. Wie unten gezeigt, müssen Sie den Installationspfad der WeChat-Entwicklertools in das Eingabefeld eingeben. Wenn H Builder Echtzeiteffekte hat.

uni-app kompiliert das Projekt standardmäßig in das Entpackverzeichnis des Stammverzeichnisses. So führen Sie „hello uniapp aus

4. Führen Sie das Alipay Mini Program Developer Tool aus: Geben Sie das Hello-Uniapp-Projekt ein, klicken Sie in der Symbolleiste auf „Run to the Mini Program Developer Tool“. -app in den Alipay-Miniprogramm-Entwicklertools.

So führen Sie „hello uniapp aus

5. In den Baidu Developer Tools ausführen: Geben Sie das Hello-Uniapp-Projekt ein, klicken Sie in der Symbolleiste auf „Ausführen“, um den Mini-Programmsimulator zu starten. Sie können die Baidu Developer Tools Experience uni öffnen -app drin.

So führen Sie „hello uniapp aus

6. In den Bytedance Developer Tools ausführen: Geben Sie das hello-uniapp-Projekt ein, klicken Sie in der Symbolleiste auf Ausführen -> Zum Miniprogrammsimulator ausführen -> Bytedance Developer Tools, und Sie können im Tool in der Bytedance Experience uni-app entwickeln.

So führen Sie „hello uniapp aus

7. Importieren Sie in die 360-Entwicklungstools: Geben Sie das Hello-Uniapp-Projekt ein, klicken Sie in der Symbolleiste auf Ausführen -> Zum Miniprogrammsimulator ausführen -> 360-Entwicklungstools, Sie können Uni in den 360-Graden erleben ​Entwicklungstools-App.

So führen Sie „hello uniapp aus

8. Im Quick Application Alliance-Tool ausführen: Geben Sie das hello-uniapp-Projekt ein, klicken Sie in der Symbolleiste auf Ausführen -> Zum Miniprogrammsimulator ausführen -> Quick Application Alliance-Tool. Sie können es in der Quick Application ausführen Allianz-Tool Erleben Sie die Uni-App im Inneren.

So führen Sie „hello uniapp aus

9. In den Huawei Developer Tools ausführen: Geben Sie das Hello-Uniapp-Projekt ein, klicken Sie in der Symbolleiste auf „Ausführen“, um den Mini-Programmsimulator anzuzeigen. Sie können es in den Huawei Developer Tools Experience ausführen Uni-App drin.

So führen Sie „hello uniapp aus

10. Führen Sie das QQ-Applet-Entwicklungstool aus: Der Inhalt ist derselbe wie oben und wird nicht wiederholt.

Das obige ist der detaillierte Inhalt vonSo führen Sie „hello uniapp' aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage